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

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

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

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

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

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

・データの保存、上書き

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

上記のどちらでもOKです。
個人的には、上の書き方の方が好みなので、こちらを使っています。
なお、１つめの記述方法ですが、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 の導入を検討してみてはいかがでしょうか。