Local Storageを使ってみる

Local Storageとは

Local StorageとはHTHL5から導入されたWEB APIの一種で、Javascriptでブラウザにデータを記録する仕組みです。

利点

ブラウザにデータを保存できる
cookieのようにWEBサーバーにデータを保存するのではなくブラウザに保存するので、
ブラウザを閉じてもユーザーの入力情報などを保持し続けることができます。

保存容量が大きい
主要なブラウザなら5MBまでデータを保存できます。

注意点

データは永続的に保存される
こちらでLocal Storageのデータを削除する処理を書かないと、データは永続的に残り続けるので削除する処理を書きましょう。

Javascriptから自由にアクセスできる
セキュリティ上非常に大きな注意点です。
ユーザーの個人情報など、機密性の高い情報には使わないようにしましょう。

構文

保存
localStorage.setItem('key', 'value')あるいはlocalStorage.saveKey = 'value'と書くだけで保存ができます。

test.js

localStorage.setItem('key', 'value1');
localStorage.saveKey = 'value2';

取得
localStorage.getItem('Key')あるいはlocalStorage.saveKeyでvalueを取得することができます。

test.js

var value1 = localStorage.getItem('Key')
var value2 = localStorage.saveKey;

削除
localStorage.removeItem('key')で指定したキーのデータを削除するか、localStorage.clear()ですべてのデータを削除します。

test.js

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

実装

この記事を読んだ日時を記録する機能を作成しました。
この記事を見た日を記録を押すと現在の日時を記録し、この記事を見た日を表示で記事を見た日時を表示します。
クリアを押すことでLocal Storageのデータを消去します。
日時を記録してからブラウザを閉じ、もう一度この記事を開いて日時が記録されているか実験してみてください。

See the Pen by masuda (@sankomasuda) on CodePen.