Web API之sessionStorage、localStorage、globalStorage

sanyang 發布于2019-08-21 10:38 / 444人閱讀

摘要：介紹和都是的屬性，也是對象的實例，即返回，返回也因此兩者享有的屬性和方法。可能添加鍵值對失敗，原因可能用戶禁止使用或者達到存儲上限。存儲在瀏覽器中的數據，如，以源進行分割。下表給出了相對同源檢測的示例兼容性端移動端參考資料

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)起不再支持。

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

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

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

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腳本不能對屬于其它源的數據進行讀寫操作。

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

7. 兼容性
a) PC端

b) 移動端

8. 參考資料
a) https://w3c.github.io/webstorage/#the-sessionstorage-attribute
b) https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
c) https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
d) https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

云服務器 GPU云服務器 globalStorage Sessionstorage webrtc web api web?api??異常處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85904.html

數據存儲

摘要：數據并非存儲在一個安全環境中，其中包含的任何數據都可以被他人訪問。的兩個主要目標是提供一種在之外存儲會話數據的途徑提供一種存儲大量可以跨會話存在的數據的機制。隨著Web應用程序的出現，產生了對于能夠直接在客戶端上存儲用戶信息能力的要求。比如登錄信息、偏好設定或其他數據，這個問題的第一個方案是以cookie的形式出現的，今天cookie只是在客戶端存儲數據的其中一種選項。 cookie...

frolc 2019-08-23 17:03 評論0 收藏0
瀏覽器本地存儲

摘要：瀏覽器本地存儲在較高版本的瀏覽器中，提供了和。單個保存的數據不能超過，很多瀏覽器都限制一個站點最多保存個。瀏覽器本地存儲在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage html5中的Web Storage包括了兩種存儲方式：sessionStorage和loca...

oysun 2019-08-22 15:58 評論0 收藏0
JavaScript 離線應用與客戶端存儲——“數據存儲”的注意要點

摘要：對象應該主要用于僅針對會話的小段數據的存儲。如下代碼限制與其它客戶端數據存儲方案類似，同樣也有限制。最好一開始就調用方法為數據庫指定一個版本號傳入一個表示版本號的字符串。目前就瀏覽器，版本號方法已不再適用，另外，創建 Cookie 限制由于瀏覽器存在各種限制，最好將整個cookie長度限制在4095B以內。構成 cookie由瀏覽器保存的以下幾塊信息構成：名稱： cookie的...

dreamGong 2019-08-19 17:51 評論0 收藏0
一文帶你看懂cookie，面試前端不用愁

摘要：的屬性在瀏覽器的控制臺中，可以直接輸入來查看。可以在瀏覽器的控制臺中看出哪些是類型的，下帶綠色對勾的即是，如圖只要是類型的在控制臺通過是獲取不到的，也不能進行修改。當會話過期或被放棄后，服務器將終止該會話。在中，用取代了。本文由云+社區發表在前端面試中，有一個必問的問題：請你談談cookie和localStorage有什么區別啊？ localStorage是H5中的一種瀏覽器本地存...

notebin 2019-08-23 13:59 評論0 收藏0
javascript-離線應用于客戶端存儲

摘要：離線檢測含義設備能否上網代碼注和，和最新的沒問題應用緩存緩存的目的是專門為網頁離線設計的，當然在在線情況也會緩存機制當用戶在地址輸入請求的地址去請求網頁時，瀏覽器會先本地緩存中查看是否有對應的緩存文件，如果有然后查看新鮮度就是是否過期了，如 23.1 離線檢測含義：設備能否上網代碼： navigator.onLine 注：IE6+和safari+5，firefox3+和ope...

gecko23 2019-08-23 15:21 評論0 收藏0