localStrageで半永久保存のやり方

webブラウザの機能のlocalStrageについてです。

まず、localStrangeをなんなのか見てみましょう

見方についてはchromeの検証ツール→アプリケーション→localStrage→fileで見ることができます。

では、この機能について見ていきましょう

開いたらキーと値というものがあると思いますが、これは、keyとvalueでこれらをここに格納できるんです。

格納するだけだったらオブジェクトと変わりませんよね。ですが、これはページを閉じたりリロードをしたりしてもずっと保存しておきたい値を格納できるんです。

使い道は（どのページを見ただとか、どの商品にお気に入りボタンを押したなど）など様々です。

cookieとあんまり変わらないですが、容量や保存期間が少し違います

ですが、ここに格納するには、一つ条件があります。

それは、すべて文字列で書かなきゃいけないんです。

例えば、配列やオブジェクトをそのままlocalstrageに保存すると
"[Object object]"のように意味不明な形で保存されます。

これを解決するにはjsonでオブジェクトを文字列にしなければいけません。

やり方は

json.stringify([1,2,3])

とすると

"[1,2,3]"

と文字列になりlocalStrageに保存できるようになります。

なお、json.stringifyは配列の中身が多すぎて見れないときなどに見れるようにするためにもつかわれます。

ちなみに、json型が使いづらくて元の形に戻したい場合は
js
json.parse

でもとに戻せます。

localStrageに文字列を保存する方法

localStrage.setItem("key","value")

//その2：オブジェクトのプロパティとして保存するパターン
localStorage.saveKey = '保存する値';

これで格納できます。

また、値を返したいときは

localStrage("key")

複数格納の場合

var obj = {
      last : tarou,
      first : yamada
    };
var obj = JSON.stringify(obj);
localStorage.setItem('Key', obj);

取り除く場合

localStorage.removeItem('Key');

初期化

localStorage.clear();