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/
でしかデータが取れないです。