【JavaScript】クライアント側にデータを無期限に保存できる「LocalStorage」

村上 著者:村上

【JavaScript】クライアント側にデータを無期限に保存できる「LocalStorage」

クライアント(ブラウザ)側にデータを保存する方法としては、Cookie がよく使われているかと思います。
が、個人的に使い勝手が良いと思っているのが、「Local Storage」です。

Local Storage も Cookie と同じように、ブラウザにデータを保存できます。
データの保存・取得・削除・全クリアなどの操作は、JavaScriptで行います。
Cookie と LocalStorage の違いをまとめた表はこちら。

別ウィンドウでのデータ共有 データの有効期限 データ量の上限 サーバーへのデータ送信
Cookie できる 指定期限まで有効 4KB サーバーへアクセスするたびに毎回自動送信
LocalStrage できる 永続的に有効 5MB 必要時のみスクリプトやフォームなどで送信

なお、こちらの表は、下記のサイトから転載させて頂いております。

Web Storage ‐ HTML5のAPI、および、関連仕様
http://www.htmq.com/webstorage/

 

具体的な使い方は、下記のとおりです。
 

・データの保存、上書き

window.localStorage.setItem('nickname', 'murakami');
localStorage.nickname = 'murakami';

上記のどちらでもOKです。
個人的には、上の書き方の方が好みなので、こちらを使っています。
なお、1つめの記述方法ですが、window は省略可能です。
 

・データの取得

var name;
name = window.localStorage.getItem('nickname');
name = localStorage.nickname;

取得するための記述はこんな感じ。
なお、こちらの書き方についても、window は省略できます。
 

・データの削除

window.localStorage.removeItem('nickname');  // 'nickname'の値を削除
window.localStorage.clear();  // 全削除(初期化)

最後はデータの削除ですが、アイテム名を指定して、その値のみを削除する方法と、全データを削除する方法があります。
無いとは思いますが…書き間違えにご注意ください。
なお、例にもれず、こちらも window を省略可です。

 

個人的には、Cookie よりも直感的に操作出来るし、意図的にデータを消さない限りデータが半永久的に残るので使いやすいです。
Cookieで苦しめられた記憶のある方は、こちらの Local Storage の導入を検討してみてはいかがでしょうか。

  • この記事いいね! (2)

著者について

村上

村上 administrator