javascript - localStorageの使い方 [ javascript ]

クッキーと同じくらいメンドクサイんじゃないかと、そしてメンドクサイならもうクッキーでいいじゃないか、と敬遠していたローカルストレージ。

調べてみると使い方はとても簡単。

複雑な初期化手順は要らない、ファイル的な何かを考慮する必要もない、単純にメモリ上においたハッシュ(javascriptのオブジェクト)がページをまたがって消えないようになったもの。

こんな簡単でいいのかな？いやこんな簡単で何が悪いんだ？

そんなローカルストレージ(localStorage)について使い方の備忘録。

とりあずこれだけ押さえましょ

データを格納する	localStorage.setItem(キー, データ) キーに対応するデータを格納する。
データを取得する	localStorage.getItem(キー) キーに対応するデータを取得する。
データを削除する	localStorage.removeItem(キー) キーに対応するデータを削除する。
スッキリさせる	localStorage.clear() ローカルストレージをクリアする。全てをスッキリしてくれるが、ドメインに紐づいたデータが消えてしまうのが玉にキズ？

これだけあればまずは十分。キーとデータには共に文字列を使用すること推奨。

使用上の注意点

データは文字列で扱うこと推奨

定義としては、javascriptのオブジェクトを格納できるらしいlocalStorageだけど、実装としては文字列を格納しているブラウザが多いらしいので、データは文字列として格納しておくのが無難。

なので、オブジェクトを格納したい時は、JSON形式に変換するなどしておくのが安全。

格納：

localStorage.setItem(key, JSON.stringify(data))

取得：

JSON.parse(localStorage.getItem(key))

プロパティとして操作することもできるけど…

キーと値は、javascriptオブジェクトのプロパティのようにも扱えるらしい。

つまり格納するときの「localStorage.setItem("config", "data")」や、取得するときの「localStorage.getItem("config")」等は、

• localStorage.config = "data"
• localStorage["config"] = "data"

とも書けるし、削除も、

delete localStorage["config"]

なんて書けてしまうらしい。

ただ、プロパティとして扱うと、本来localStorageが持っている「length」とかと被ったり、「user-data」なんて文法的にややこしいことになりそうなキーを使うときややこしそうなので、このメソッドで扱うのが無難だと思う。