javaScript localStorageの使いかた

javascriptでlocalStorageを使用する方法を紹介します。

cookieやsessionのようにブラウザに値を保存しておくことができます。

性質の違いとしては期限付きでは無いということです。

また、cookieとは違い単調な文字列として保存ではなく、様々な形で保存することができます。

基本的な使いかた

localStorage.getItem();
localStorage.setItem();

取り出しや保存はこの二つを使用することで行うことができます。

localStorageはkey,valueで保存を行っています。

そのため、getItemにはkeyを指定し、setItemにはkeyと保存する値を指定します。

localStorage.getItem('id');
localStorage.setItem('id',1);

またストレージから削除するためには以下のように行います。

localStorage.removeItem('id');
localStorage.clear();

removeItemではキー名を指定することで指定したキーのアイテムを削除することができます。

clearでは使用したドメインのすべてのストレージが削除されます。

実際に使用する

単調な文字列であればcookieに保存できます。

配列を保存する場合で説明します。

配列で使用するにはJSON形式を使用します。

JSON.parse( localStorage.getItem( name ) );

localStorage.setItem( name, JSON.stringify( data ) );

保存する際はJSONの文字列に、取得する際にはJSONにパースします。

これで配列でも使用しやすい形になります。