localStorage sessionStorage

defcon 發布于2019-08-23 12:09 / 3835人閱讀

摘要：和當頁面會話結束的時候，數據將會被清除。大文檔即內容安全政策，要求強制瀏覽器啟用，白名單制度，要求瀏覽器那些可以訪問，那些不能訪問。回顧，注冊事件使用的是方法事件有此為四個事件事件事件為設置或者移除項的名字或者鍵名。

localStorage 和 sessionStorage

Window.localStorage 當頁面會話結束的時候，數據將會被清除。

之前一刷新頁面，直接被清除，后來發現是瀏覽器插件引入的js腳本，導致出現問題，在思考，如何驗證網頁是否被插入js腳本，即，類似于掘金社區的，每次訪問都會提示，被插入腳本。此有一個專業術語，叫SRI

SRI

原理，使用哈希值驗證前端資源的完整性。
大文檔 https://developer.mozilla.org...

CSP

即內容安全政策，要求強制瀏覽器啟用，白名單制度，要求瀏覽器那些可以訪問，那些不能訪問。

localStorage

此沒有過期時間，只有當第三方，或者用戶手動清理的時候，才會清空，其余都會一直在瀏覽器里保存。
演示

var number = Number(localStorage.number);
if (number) {
    ++number;
}else {
    number = 1;
}
localStorage.number = number;
document.write(number);

js文件如上，每次刷新頁面重新加載的時候，都會從瀏覽器中讀取localStorage.number的內容。然后進行自增。
場景用于計數操作

seessionStorage

此為一個會話的儲存，儲存在會話當中，關閉瀏覽器標簽以后，將會被清除，

這兩個都受到同源的影響，但是sessionStorage最大的不同在于同一個網站，渲染同一個頁面，即使是兩個標簽，其sessionStorage不可共享，但是iframe可以共享，localStorage受到同源的影響，可以共享。

存儲api

一些瀏覽器廠商定義的api
其中有兩個方法，為setItem()以及getItem()這兩個方法可以設置值，可以獲取值。
一個demo

localStorage.setItem("x", 1);    // 設置值
localStorage.getItem("x");    // 讀取值

// 枚舉所有的名值對
for(var i = 0; i < localStorage.length; i++) {
    var name = localStorage.key(i);    // 獲取第i對名字
    var value = localStorage.getItem(name);    // 獲取該對的值
    console.log(name + "," + value);    // 輸出值
};

localStorage.removeItem("x");    // 刪除x項
localStorage.clear();    // 全部刪除

ps： getItem獲取的僅僅是儲存的副本

儲存事件

如果儲存在localStorage 以及 sessionStorage的數據發生更改，瀏覽器會在所有數據可見的頁面，觸發事件

在對數據進行改變的窗口對象上不會觸發該事件

eg；如果兩個頁面，其中一個頁面儲存了localStorge，那么另外一個頁面也會觸發儲存的事件。

回顧，注冊事件使用的是addEventListener()方法

事件有key newValue storageArea url
此為四個事件

事件

key事件為設置或者移除項的名字或者鍵名。
newValue 保存新項目的值
oldValue 改變或者刪除之前的值
url 觸發編號的url
stroageArea 為windows對象上的sessionStroage的值

事件是采用廣播機制的。
ps 如果一個用戶要求網站停止動畫，而這個配置是儲存在localStroage中的，那么同源的將會全部停止動畫
ps 一個文本編輯，如果用戶選擇一個工具的時候，可以通過其值，完成通知另外窗口的選擇了該工具，用于窗口間的值的傳遞

GPU云服務器云服務器 Sessionstorage localstorage localstorage存儲存儲localstorage

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

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

sessionStorage和localStorage

摘要：前端存儲和簡述曾在項目中多次使用過和來存放，但一直未深入了解。以為例他們均只能存儲字符串類型的對象存儲大小都為都遵守同源策略不同點有期限，當窗口或瀏覽器關閉時就會被銷毀。本文如有錯誤，歡迎指出。 H5前端存儲 localStorage 和 sessionStorage 簡述曾在項目中多次使用過localStorage和sessionStorage來存放token，但一直未深入了解。近...

wujl596 2019-08-23 14:38 評論0 收藏0
印象最深的一個bug：sessionStorage緩存在移動端失效

摘要：移動端緩存失效是我印象最深的一個之一，為啥呢，因為這個問題導致我加班到很晚。的生命周期是僅在當前會話下有效。引入了一個瀏覽器窗口的概念，是在同源的窗口中始終存在的數據。無bug，不程序：作為程序員的我，不是修bug就是在寫bug的路上。　　移動端sessionStorage緩存失效是我印象最深的一個bug之一，為啥呢，因為這個問題導致我加班到很晚。在現在看來就是一個簡單的概念問題。在我剛工作...

yuxue 2021-11-18 10:07 評論0 收藏0
sessionStorge和localStorage的使用-踩坑記_09

摘要：的使用屬性允許你訪問一個對象。它與相似，不同之處在于里面存儲的數據沒有過期時間設置，而存儲在里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。 sessionStorge的使用 sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 lo...

Jochen 2019-08-23 13:41 評論0 收藏0
sessionStorge和localStorage的使用-踩坑記_09

摘要：的使用屬性允許你訪問一個對象。它與相似，不同之處在于里面存儲的數據沒有過期時間設置，而存儲在里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。 sessionStorge的使用 sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 lo...

PrototypeZ 2019-08-02 12:06 評論0 收藏0
客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wangbinke 2019-08-21 14:37 評論0 收藏0