成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

localStorage sessionStorage

defcon / 3858人閱讀

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

localStorage 和 sessionStorage

Window.localStorage 當頁面會話結(jié)束的時候，數(shù)據(jù)將會被清除。

之前一刷新頁面，直接被清除，后來發(fā)現(xiàn)是瀏覽器插件引入的js腳本，導(dǎo)致出現(xiàn)問題，在思考，如何驗證網(wǎng)頁是否被插入js腳本，即，類似于掘金社區(qū)的，每次訪問都會提示，被插入腳本。此有一個專業(yè)術(shù)語，叫SRI
SRI

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

CSP

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

localStorage

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

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

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

seessionStorage

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

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

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

localStorage.setItem("x", 1);    // 設(shè)置值
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的數(shù)據(jù)發(fā)生更改，瀏覽器會在所有數(shù)據(jù)可見的頁面，觸發(fā)事件

在對數(shù)據(jù)進行改變的窗口對象上不會觸發(fā)該事件

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

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

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

事件

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98013.html

相關(guān)文章

  • sessionStorage和localStorage

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

    wujl596 評論0 收藏0

  • 印象最深的一個bug：sessionStorage緩存在移動端失效

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

    yuxue 評論0 收藏0

  • sessionStorge和localStorage的使用-踩坑記_09

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

    Jochen 評論0 收藏0

  • sessionStorge和localStorage的使用-踩坑記_09

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

    PrototypeZ 評論0 收藏0

  • 客戶端數(shù)據(jù)存儲 --- web storage From 《高程3》

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

    wangbinke 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<