Browser Storage

Web Storage API を使用する

Local Storage

手軽にデータを記録することができる。

Local Storageは開発者ツールから簡単に書き換えできるので、重要なデータを記録することには使わないこと。

代わりに、IDBやSimpleDBなどのJavaScriptモジュールを使うこと。

使い方

Storageインタフェースを使う。

使い方は簡単で、記録したいデータのキーとその値を指定するだけでいい。 ただし、自動的に文字列に変換される。

一応現在使用できるか確認をしておいたほうがいい。


// set
window.localStorage.setItem('key1', 100);
window.localStorage.setItem('color', "#FF0000");

// get
let color = window.localStorage.getItem('color'); //<- "#FF0000"

for(let index=0; window.localStorage.length; ++index) {
    let value = window.localStorage.key(index); // get with index
    console.log(value);
}

window.localStorage.removeItem('color');

window.localStorage.clear();

ページで定められたプロトコルに違反するとSecurityErrorという例外を投げる。

関係するページ Same-origin policy

Session Storage

こちらもStorageインタフェースを使う。

window.sessionStorageからアクセスできる。

window.sessionStorageに保存されたデータはページのセッション終了時に消される。