localStorageを使ってデータ保存!

javascriptで、ブラウザに値を保存しておきたい時があります。 いろいろ調べたのですが、localStorage、というものを使うと保存できるようです。 ブラウザ上で、情報を管理するというと、Cookieではどうなのか、となりますが、 Cookieより安全、大容量が可能というメリットが有ります。 また、特にライブラリもなく直ぐ使えます。

覚えることは3つだけなので、簡単に取り入れることが出来ます。

localStorage

保存、取得、削除、この関数を覚えるだけです。

• localStorage.setItem("keyとなる文字列", "valueとなる文字列")

アイテムを保存する関数です。localStorageはキーとバリューをペアとするKVSでアイテムの管理をしてます。正直Hashとの違いが曖昧でよくわからないのですが。

• localStorage.getItem("keyとなる文字列")

キーを指定子てアイテムを取り出します。連想配列と同じ感覚。

• localStorage.removeItem("keyとなる文字列")

アイテムを削除します。

例：

/* アイテムの保存 */
localStorage.setItem("01", "tokyo");
localStorage.setItem("02", "nagoya");
localStorage.setItem("03", "osaka");

/* アイテムの取得 */
localStorage.getItem("01");     /* => "tokyo" */

/* アイテムの削除 */
localStorage.removeItem("01");     /* => undefined */

注意

localStorageの欠点は、データをオリジンごとに保存するということです。 http://example.com/で保存すると、同じくhttp://example.com/でしかデータが取れないです。

参考

• Web Storage