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

LocalStorageとは

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

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

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

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

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

Cookie（クッキー）とSession（セッション）の違いとその仕組み

LocalStorageが利用できるかの確認

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

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

値を保存する：setItem()

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

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

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

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

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

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

値を取得する：getItem()

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

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

localStorage.key;
localStorage['key'];

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

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

キーの削除：removeItem()

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

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

localStorage.removeItem("favoriteSite");

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

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

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

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

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

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

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に保存：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を実行するようにしましょう。