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にデータを保存する方法はリテラル方法とメソッド方法の２つある。
以下はそれぞれの保存方法の使い方の例である。
javascript
localStorage.age = '23' //リテラル方法
localStorage.setItem('age', '23') //メソッド方法
なお、localStorageのkeyとvalueは必ず文字列でなければならない。
そのため、オブジェクトをvalueにしたい場合、jsonを利用することで保存することができる。
javascript
localStorage.user = JSON.stringify({name: "John"})
let user = JSON.parse( localStorage.user )
alert( user.name ) // John
javascript
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にデータを保存する方法と同様にリテラル方法とメソッド方法の２つある。
以下はそれぞれの保存方法の使い方の例である。
javascript
localStorage.age //リテラル方法
localStorage.getItem('age') //メソッド方法
localStorage.getItem() //引数がない場合、全体の値を返却
localStorage.length //localStorageに保存されている数を返却
localStorage.key(0) //〇番目に該当するkeyとvalueを返却
データの削除
javascript
localStorage.removeItem('age') //localStorageの`age`というkeyをもつデータを削除
localStorage.clear() //localStorageの全てのデータを削除p
sessionStorage
基本的な文法はlocalStorageと変わらない。
javascript
sessionStorage.setItem("age", "24") //データの保存
sessionStorage.getItem("domain") //データの読み込み
sessionStorage.removeItem("domain") //指定したkeyをもつデータの削除
sessionStorage.clear() //sessionStorageの全てのデータを削除