Cacher is the code snippet organizer for pro developers

Overview

LocalStorageはWebStorageと呼ばれるものの一つ。JavaScriptでブラウザにデータを保存できるHTML5の新しめAPI。オリジン単位でデータを永続的に保存するストレージ（http://www.example.com:80みたいなドメイン一つを１オリジンと考える）

Difference from Cookie?

• Cookie
  • 保存容量が最大4KB
  • リクエストの度にサーバへ値を送信
  • 任意に有効期限を決められる
• LocalStorage
  • 保存容量はブラウザにより異なる(1MB～5MB?)
  • サーバへ値を送信しない
  • 無期限

SessionStorage ?

同じく HTML5 の新APIで LocalStorage と似ているが、一回限りのセッションで有効なストレージであり大きく「有効期限」が違う。LocalStorage では半永久的にデータを保持できるのに対し SessionStorage はウィンドウやタブを閉じると消失する。作業途中データや画面遷移時の一時的なデータ保存に有効。また、別ウィンドウでのデータ共有も LocalStorage は可能だが SessionStorage は対応不可。

Notice !!

オブジェクトの直格納はできません！！！JSで作成したオブジェクトを localStorage に格納する場合は、一度 JSON.stringify() でJSON文字列に変換してぶち込み、再取得時に JSON.parse() する必要がありまする。

Sample Code

https://goo.gl/NbFc9t

can i use ?

if (!window.localStorage) {
    alert('お使いのブラウザは localStorage に対応してません。');
}

CRUD

// save
window.localStorage.setItem(key, val);

// save obj
window.localStorage.setItem(key, JSON.stringify(val));

// read
console.log(window.localStorage.getItem(key));

// read obj
console.log(JSON.parse(window.localStorage.getItem(key)));

// delete
window.localStorage.removeItem(key);

// init (clear)
window.localStorage.clear()