Html5 localStorage入門教學

只讀的localStorage 允許你存取一個Document 的遠端（origin）物件Storage；資料儲存為跨瀏覽器會話。 localStorage 類似於sessionStorage，區別在於，資料儲存在localStorage 是無期限的，而資料儲存在sessionStorage 會被清除，當頁面會話結束時-也就是說當頁面被關閉。

localStorage 內鍵值對的數量。

 localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1

新增/更新localStorage 的鍵值對。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Storage {age: 23, name: mazey, length: 2}

等同於：

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Storage {age: 23, name: mazey, length: 2}

取得localStorage 中指定鍵的值。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex ') // null

等同於：

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // undefined

移除localStorage 中指定鍵的鍵值對。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Storage {age: 23, name: mazey, length: 2}localStorage.removeItem('age') / / undefinedlocalStorage // {name: mazey, length: 1}localStorage.removeItem('age') // undefined

清空localStorage 中所有鍵值對。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Storage {age: 23, name: mazey, length: 2}localStorage.clear()localStorage // Storage {length: 0}

localStorage 只能存字串，所以陣列/物件等複雜值要先用JSON.stringify() 轉換成字串，取出來時再用JSON.parse() 轉換成複雜值再使用。

 let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) // [1, 2, 3]

讓window 監聽localStorage 的storage，一個標籤的localStorage 改變時，其它標籤做出對應的回應。

test0.html - 改變localStorage。

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input').值 }</script>

test1.html - 回應localStorage 的改變。

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // name 123 })</script>

1. localStorage 只能在同網域下使用，可以搭配postMessage 和iframe 實作跨域通訊。
2. 低版本IE不支援localStorage。
3. 需在伺服器環境下使用，即無法在file:// 等非正常環境下使用。
4. 在行動裝置localStorage（H5, IOS, Android）會發生不可預測的問題。

Please Stop Using Local Storage

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。