【JavaScript】LocalStorageとは:ブラウザに値(配列)を保存・取得・削除する方法

時計 2023.10.28 / 時計

【JavaScript】LocalStorageとは:ブラウザに値(配列)を保存・取得・削除する方法

記事ではJavaScriptで利用できるLocalStorageについて詳しく解説していきます。

LocalStorageとは利用者のブラウザにデータを保存する仕組みのことです。JavaScriptを利用して簡単にブラウザにデータを保存・取得・削除することができます。

LocalStorageには文字列しか保存できませんが、変換や復元をすることで配列も保存・取得することができます。

本記事を通して、LocalStorageの使用方法について理解を深めてください。

LocalStorage(ローカルストレージ)

LocalStorageとは

LocalStorage(ローカルストレージ)とはJavaScriptを利用してデータを利用者のブラウザに保存する仕組みです。Web Storage APIとしてHTML5から導入されました。

ブラウザに保存されたデータはブラウザを閉じてもクリアされず、無期限でブラウザに残ります。

データはKey-Value型であり、クッキーよりも扱えるデータ量が多いという特徴があります。またJavaScriptを使って簡単にデータの保存や取得・削除ができます。セキュリティの観点から、個人情報などの機密情報はLocalStorageに保存しないようにしましょう。

localStorageには保存できるデータの容量制限があります。ほとんどのブラウザで5MB程度となっています。

注意点

ユーザーはLocalStorageに保存されたデータをいつでも削除することができます。そのためLocalStorageに保存するデータは一時的なものや再度生成することができるデータなどに留めておきましょう

LocalStorageと似た仕組みとしてSessionStorageやCookie(クッキー)、Session(セッション)などがあります。SessionStorageはLocalStorageと異なる点として、ページセッションが終了したとき(ページが閉じられたとき)にデータがクリアされます。CookieとSessionについては以下記事をご参照ください。

LocalStorageの特徴まとめ
  • データをブラウザに保存する仕組み
  • ブラウザを閉じてもクリアされず、無期限でブラウザに保存される
  • データはKey-Value型
  • 格納できる値は文字列(String型)のみ
  • クッキーよりも扱えるデータ量が多い
  • LocalStorageに保存できる容量は約5MB
  • JavaScriptを使ってデータの保存や取得・削除が簡単にできる
  • 個人情報などの機密情報の保存には使用しない

LocalStorageの使用方法

LocalStorageが利用できるかの確認

アクセスに利用しているブラウザでLocalStorageが使えるかの確認は以下のような処理を記述します。

if (window.localStorage) {
//localStorageが利用できるときの処理
}

値を保存する:setItem()

LocalStorageに値を保存するにはsetItem()を使用します。以下構文のとおり、第一引数にはキーとして任意の文字列を指定し、第二引数には値を指定します。

構文

localStorage.setItem('key', value);

以下のように記述しても同様にキーと値を保存します。

localStorage.key = value;
localStorage['key'] = value;

例えば次のように使用します。

localStorage.setItem("favoriteSite", "Office54");

上記の方法でキーと値のペアをLocalStorageに保存します。

値を取得する:getItem()

LocalStorageに保存された値を取得するにはgetItem()を使用します。以下構文のとおり、引数にキーを指定して値を取得できます。指定したキーがLocalStorageに存在しない場合はnullを返します。

構文

localStorage.getItem('key');

以下のように記述しても同様に値を取得できます。

localStorage.key;
localStorage['key'];

例えば次のように使用します。

var site = localStorage.getItem("favoriteSite");

キーの削除:removeItem()

LocalStorageに保存されたキーと値のペアを削除するにはremoveItem()を使用します。以下構文のとおり、引数には削除したいキーを指定します。

構文

localStorage.removeItem('key');

例えば次のように使用します。

localStorage.removeItem("favoriteSite");

すべてのアイテムを削除:clear()

LocalStorageに保存されたすべてのアイテムを削除するにはclear()を使用します。以下構文のとおり、引数には何も指定せずに使用します。

構文

localStorage.clear();

LocalStorageに保存されているアイテム数:length

LocalStorageに保存されているアイテム数を取得するにはlengthを使用します。以下構文のとおり、LocalStorageにlengthを付けるだけで保存されているアイテム数を返します。

構文

localStorage.length;

位置を指定してキーを取得:key()

LocalStorageから指定した位置のキーを取得するにはkey()を使用します。以下構文のとおり、key()の引数に指定したn番目のキーを返します。

構文

localStorage.key(n);

LocalStorageの使用例

LocalStorageに値を保存する

以下のようにJavaScriptを記述することでLocalStorageに値を保存することができます。ここではlocalStorageSave関数を定義しています。

function localStorageSave() {
    var data1 = document.getElementById("data1").value;
    localStorage.setItem('data1', data1);
}

LocalStorageから値を取得する

以下のようにJavaScriptを記述することでLocalStorageから値を取得することができます。ここではlocalStorageGet関数を定義しています。

function localStorageGet() {
    var data1 = "";
    if(!localStorage.getItem('data1')) {
        data1 = "data1は存在しませんでした";
    } else {
        data1 = localStorage.getItem('data1');
    }
    // data1に対しての処理 例:data1を画面上に表示
    document.getElementById("data1").innerHTML = data1;
}

上記のようにLocalStorageに指定したキーが存在しない場合は何かしらの値を取得するようにしておきましょう。

LocalStorageに配列を保存する方法

LocalStorageに保存できる値は文字列のみです。
配列をlocalStorageに保存するには一旦文字列に変換して保存して、取得時には文字列を配列に復元します。

配列を文字列に変換してLocalStorageに保存:JSON. stringify

配列を文字列に変換するにはJSON.stringifyを使用します。文字列に変換することでsetItem()でlocalStorageに保存することができます。

var array = ['data1', 'data2', 'data3'];
localStorage.setItem('data', JSON.stringify(array));

文字列に変換したデータを配列に復元:JSON.parse

文字列に変換したデータを配列に戻す(復元)にはJSON.parseを使用します。

var array = [];
if(localStorage.getItem('data') !== null){
    array = JSON.parse( localStorage.getItem('data') );
}

上記のようにまずはlocalStorageにアイテムが保存されているか確認し、保存されていることが確認できたらJSON.parseを実行するようにしましょう。

まとめ

本記事「【JavaScript】LocalStorageとは:ブラウザに値(配列)を保存・取得・削除する方法」はいかがでしたか。

LocalStorageを使いこなすことで、Webアプリケーションで実現できることの幅が広がります。

ぜひご自身のWebアプリケーションでLocalStorageを利用してみてください。