塩焼きブログ

塩焼きに関しての研究内容を公開しています

JavaScriptでLocalStorageを使う

JavaScriptからLocalStorageを使えばクライアントサイドだけで長期間のデータ保存が可能となる。実際の使用にはlocalStorageオブジェクトを利用するだけでいい。

if (window.localStorage) {
  if (localStorage.foo) {
    localStorage.foo ++;
    console.log(localStorage.foo);
  } else {
    localStorage.foo = 0;
  }
}

localStorageとcookieの違い

  • localStorageには有効期限がなくサーバーに送信されない
  • cookieは有効期限がありサーバーに送信される

このような違いがある。

cookieの場合PHPであれば$_COOKIEで取得できると思うし、他の言語でも当然サーバーサイドで取得する術があると思うが、このようにサーバーにデータが送信されているということを考えると無駄である。 実際にサーバーにデータがどのように送信されているかは調べたことないので適当なことを言ってるかもしれないけど。

しかしLocalStorageはサーバーにデータが送信されないし、有効期限も無いので、大きくて長期間保存させておきたいデータでも安心して保存できる。

ユーザー認証を必要とせず、ユーザー側で改変しても構わないデータでも、CookieやサイズによってはSessionで保存させることがあり、サーバー側への負荷や対応が必要となっていたが、LocalStorageの存在によってそのようなサーバー側で抱える必要のないユーザーデータをLocalStorageに保存させることによって、サーバーサイドの負荷を減らすことができるようになる。

参考文献

Cookieの特質から、HTTP通信で送る特性を省いたもの LocalStorageがおもいのほか便利すぎたのでまとめ