localStorageとsessionStorageについて

html5で提供しているAPIのこと。
両方ともkeyとvalueをもつデータを保存場所として使うが、有効期間があるかどうかが大きな違いと言える。
localStorageとsessionStorageはドメインごとにstorageを保有し、各storageは互いの情報は共有しない。

localStorageとsessionStorageの違い

localStorageはsafari以外は有効期間は存在しないが、sessionStorageは存在するのが特徴。
なお、chromeやその他のブラウザーもsafariと同様にlocalStorageの有効期限を制限する動きあり。

	localStorage	sessionStorage
有効期間の有無	なし なお、safariは最終アクセスから7日間に制限されるという仕様変更	ブラウザー（またはタブ）が終了するとデータは削除 または、一定の時間がすぎるとデータは削除

chromeからstorageを見る方法

f12キーを押すと表示される「検証」画面のApplicationタブで見ることができる。

localStorageとsessionStorageの使い方

localStorage

データの保存

localStorageにデータを保存する方法はリテラル方法とメソッド方法の２つある。
以下はそれぞれの保存方法の使い方の例である。

localStorage.age = '23' //リテラル方法
localStorage.setItem('age', '23') //メソッド方法

なお、localStorageのkeyとvalueは必ず文字列でなければならない。
そのため、オブジェクトをvalueにしたい場合、jsonを利用することで保存することができる。

localStorage.user = JSON.stringify({name: "John"})

let user = JSON.parse( localStorage.user )
alert( user.name ) // John

let arr = [1,2,3,4,5]
localStorage.setItem("data", JSON.stringify(arr))

let output = localStorage.getItem("data")
let arr = JSON.parse(output)
console.log(arr) // [1,2,3,4,5]

データの読み込み

localStorageにデータを保存する方法と同様にリテラル方法とメソッド方法の２つある。
以下はそれぞれの保存方法の使い方の例である。

localStorage.age //リテラル方法
localStorage.getItem('age') //メソッド方法

localStorage.getItem() //引数がない場合、全体の値を返却
localStorage.length //localStorageに保存されている数を返却
localStorage.key(0) //〇番目に該当するkeyとvalueを返却

データの削除

localStorage.removeItem('age') //localStorageの`age`というkeyをもつデータを削除
localStorage.clear() //localStorageの全てのデータを削除p

sessionStorage

基本的な文法はlocalStorageと変わらない。

sessionStorage.setItem("age", "24") //データの保存

sessionStorage.getItem("domain") //データの読み込み

sessionStorage.removeItem("domain") //指定したkeyをもつデータの削除

sessionStorage.clear() //sessionStorageの全てのデータを削除