WEB Storage というものをひよんとふにしろ SWEET にしろ多用している。WEB Storage は Cookie に似たような機能だが、色々な面で少し違う。

• 使い方が違う
• 容量が違う

使い方が違う

Cookie は次の方法で更新/取得する。

document.cookie = 'user_name=hiyoko'; //1
document.cookie = 'user_sex=male'; //2
console.log(document.cookie);

document.cookie に代入することで、1つの Key-Value の組み合わせを更新する。全部が更新されるわけではない。例えば //2 で //1 の結果は上書きされたりはしない。しかし、document.cookie に全ての Key-Value の組み合わせが格納されている。正直、直感的ではない。

WEB Storage は次の方法で更新/取得する。

localStorage.setItem('user_name', 'hiyoko');
localStorage.setItem('user_sex', 'male');
console.log(localStorage.getItem('user_name'));

Cookie に比較して直感的に見える。なお、 getItem で未定義の値を取得すると null が取れたりする。

WEB Storage に JS のオブジェクトを格納しておく

SWEET で多用している方法。次のようにすると JS オブジェクトをそのまま入れられる。ただし、関数が含まれる場合はもう一工夫が必要になる。関数は JSON としては無効だからだ。セーブデータなどを入れたりするのに便利。

// 取得
var saveData = JSON.parse(localStorage.getItem(saveDataTitle));

//保存
localStorage.setItem(key, JSON.stringify(saveData));

容量が違う

Cookie はドメインごとに 4kb までしか保存できないが WEB Storage はドメインごとに 5MB (ブラウザによってはもっと多い) まで保存できる。多い。

なお

別ドメインで保存したものを参照できないのは変わらない。

WEB Storage には SessionStorage というのもある

有効期限がウィンドウを閉じるまでな WEB Storage。使い道はよくわからない。