Web API之sessionStorage、localStorage、globalStorage

時間 2020-06-15

標籤 web api sessionstorage localstorage globalstorage 欄目 HTML 简体版

原文原文鏈接

1. 介紹
a) sessionStorage和localStorage都是window的屬性，也是Storage對象的實例，即：window.sessionStorage instanceof Storage返回True，window.localStorage instanceof Storage 返回True,也所以二者享有Storage的屬性和方法。
b) sessoinStorage存儲的數據在頁面會話結束時會被清空，頁面會話在瀏覽器窗口關閉前持續存在，包含頁面刷新和恢復。若新開標籤或窗口將新建一個會話，再次獲取sessionStorage將只限於當前會話，與先前會話的無關。localStorage存儲的數據不會
c) window.globalStorage自Gecko 13 (Firefox 13)起再也不支持。html

2.屬性
a) length(只讀)：返回Storage對象存儲的數據條目數。git

3. 方法
a) key(index)：返回第index(從0開始)個鍵；若index>=length或者<0則返回null
b) getItem(key)：返回key對應的鍵值或null
c) setItem(key, value)：添加或者更新鍵值對
d) removeItem(key)：刪除該鍵對應的鍵值對
e) clear()：清空全部鍵值對github

4. 侷限
a) Value只能是字符串，因此若是想存儲對象的話，能夠使用JSON.stringify(json)轉爲字符串，取出的時候使用JSON.parse(string)轉回對象。
b) 不一樣瀏覽器的容量上限不一樣，使用該連接進行測試，http://dev-test.nemikor.com/web-storage/support-test/ 本人的谷歌版本爲：Chrome 43.0.2357，測試結果以下：
web

5. 注意
a) 一個會話只對應一個sessionStorage（或者localStorage），即var x = window.sessionStorage和var y = window.sessionStorage時，x和y指向是同一個sessionStorage對象。另外，沒法本身new一個Storage對象，即沒法var s = new Storage()，不清楚。
b) 可能添加鍵值對失敗，緣由可能：用戶禁止使用Storage或者達到存儲上限。
c) 存儲在瀏覽器中的數據，如localStorage，以源進行分割。每一個源都擁有本身單獨的存儲空間，一個源中的Javascript腳本不能對屬於其它源的數據進行讀寫操做。json

6. 知識補充
同源(same origin):若是兩個頁面擁有相同的協議（protocol），端口（若是指定），和主機，那麼這兩個頁面就屬於同一個源（origin）。
下表給出了相對http://store.company.com/dir/page.html同源檢測的示例:
瀏覽器