localStorage、sessionStorage詳解，以及storage事件使用

来源:http://www.cnblogs.com/inconceivable/archive/2016/10/14/5960202.html
-Advertisement-
Play Games

有關localStorage和sessionStorage的特性。 localStorage本身帶有方法有 添加鍵值對：localStorage.setItem(key,value)，如果key存在時，更新value。 獲取鍵值：localStorage.getItem(key)，如果key不存在返 ...


有關localStorage和sessionStorage的特性。

localStorage本身帶有方法有

　　添加鍵值對：localStorage.setItem(key,value)，如果key存在時，更新value。

　　獲取鍵值：localStorage.getItem(key)，如果key不存在返回null。

　　刪除鍵值對：localStorage.removeItem(key)。key對應的數據將會全部刪除。

　　清除所有鍵值對：localStorage.clear()。如果調用clear()方法，清空localStorage中所有信息，那麼key、oldValue和newValue都會被設置為null。

　　獲取localStorage的屬性名稱（鍵名稱）：localStorage.key(index)。

     還有一個和普通對象不一樣的屬性length:

　　獲取localStorage中保存的鍵值對的數量：localStorage.length。

　　下麵這個例子用來獲取localStorage的鍵值對

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
}

　

1、存儲格式

localStorage對象的鍵和值只能是字元串，假設我們要保存一個對象到localStorage中，可以使用拼接的方式。當然也可以藉助JSON類，將對象轉換成字元串保存，然後在取出來的時候將json字元串轉換成真正可用的json對象格式

存儲JSON格式數據

JSON.stringify(data) 將一個對象轉換成JSON格式的數據串,返迴轉換後的串
JSON.parse(data) 將數據解析成對象，返回解析後的對象

（雖然規範中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現）。

2、生命周期

在數據存儲的時效性上，localStorage並不會像cookie那樣可以設置數據存活的時限。也就是說，只要用戶不主動刪除，localStorage存儲的數據將會永久存在。

sessionStorage生命周期為當前視窗或標簽頁，一旦視窗或標簽頁被永久關閉了，那麼所有通過sessionStorage存儲的數據也就被清空了。

3、存儲位置

當然，對於localStorage數據的存儲，是存在於本地的文件系統中的，例如，對於chrome來說，localStorage數據的存儲位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。對於其他4大瀏覽器，大家可以自行查找進行查看。

4、數據共用

不同瀏覽器無法共用localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共用相同的localStorage（頁面屬於相同功能變數名稱和埠），但是不同頁面或標簽頁間無法共用sessionStorage的信息。這裡需要註意的是，頁面及標簽頁僅指頂級視窗，如果一個標簽頁包含多個iframe標簽且他們屬於同源頁面，那麼他們之間是可以共用sessionStorage的。

5、相容性

localStorage相容性說明

可以看到，除IE外的其他瀏覽器很早的版本都支持了，對於IE低版本系列的瀏覽器，我們需要一個相容方案來處理。

微軟在IE5.0以後，自定義了一種持久化用戶數據的概念userData，這種存儲方式只有IE瀏覽器自己支持。來看看其如何操作——

複製代碼 
(function(win) {
    // 對於IE，且不支持localStorage的瀏覽器
    // 即針對IE6/7
    if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
        var localFileName = "_simulateLocalStorage", 
            expires = 365,
            formField = null;
        
        // 設置有效期為365天
        var expire = new Date();
        expire.setDate(expires + expire.getDate());
        
        formField = document.createElement("input");
        formField.type = "hidden";
        formField.addBehavior('#default#userData');
        
        document.body.appendChild(formField);
    
        var storage = {
            setItem : function(key, value) {
                formField.load(localFileName);
                formField.setAttribute(key, value);
                formField.save(localFileName);
            },
            getItem : function(key) {
                formField.load(localFileName);
                return formField.getAttribute(key);
            },
            removeItem : function(key) {
                formField.load(localFileName);
                formField.removeAttribute(key);
                formField.save(localFileName);
            },
            clear : function() {
                formField.load(localFileName);
                var d = new Date();
                d.setDate(d.getDate() - 1);
                formField.expires = d.toUTCString();
                formField.save(localFileName);
            }
        };
    
        win["localStorage"] = storage;
    }
})(window);
複製代碼

這裡僅僅是對IE相容性的簡單包裝，下麵的鏈接給出非常完善的針對localStorage相容性的解決方案。

https://github.com/machao/localStorage

6、存儲大小

對於HTML5的localStorage而言，其大小支持為5M（當然，各瀏覽器的大小差異還是有的）。對於IE的userData，用戶數據的每個域最大為64KB。

7、應用場景

建議不要使用localStorage方式存儲敏感信息，哪怕這些信息進行過加密。另外，對身份驗證數據使用localStorage進行存儲還不太成熟。我們知道，通常可以通過xss漏洞來獲取到Cookie，然後用這個Cookie進行身份驗證登錄，但是瀏覽器可以通過HttpOnly來保護Cookie不被XSS攻擊獲取到。而localStorage存儲沒有對XSS攻擊有任何防禦機制，一旦出現XSS漏洞，那麼存儲在localStorage里的數據就極易被獲取到。

 

storage事件：當存儲的storage數據發生變化時都會觸發它，但是它不同於click類的事件會冒泡和能取消，storage改變的時候，觸發這個事件會調用所有同域下其他視窗的storage事件，不過它本身觸發storage即當前視窗是不會觸發這個事件的（當然ie這個特例除外，它包含自己本事也會觸發storage事件）。

在使用 Storage 進行存取操作的同時，如果需要對存取操作進行監聽，可以使用 HTML5 Web Storage api 內置的事件監聽器對數據進行監控。只要 Storage 存儲的數據有任何變動，Storage 監聽器都能捕獲。

interface Storage : Event{
    readonly attribute DOMString key;
    readonly attribute DOMString? oldValue;
    readonly attribute DOMString? newValue;
    readonly attribute DOMString url;
    readonly attribute Storage? storageArea;
    void initStorageEvent(in DOMString typeArg,
      in boolean canBubbleArg,
      in boolean cancelableArg,
      in DOMString keyArg,
      in DOMString oldValueArg,
      in DOMString newValueArg,
      in DOMString urlArg,
      in Storage storageAreaArg);
};

不難看出其中包含以下屬性：

  1. key 屬性表示存儲中的鍵名
  2. oldValue 屬性表示數據更新前的鍵值，newValue 屬性表示數據更新後的鍵值。如果數據為新添加的，則 oldValue 屬性值為 null。如果數據通過 removeItem 被刪除，則 newValue 屬性值為 null 。如果 Storage 調用的是 clear 方法，則事件中的 key 、oldValue 、newValue 都是為 null
  3. url 屬性記錄 Storage 時間發生時的源地址
  4. StorageArea 屬性指向事件監聽對應的 Storage 對象

Storage 事件可以使用 W3C 標準的註冊事件方法 addEventListenter 進行註冊監聽。例如：

window.addEventlistener("storage",showStorageEvent,false);

function showStorageEvent(e){

    console.log(e)

}

 

舉例：

頁面a下，有個input框用來存儲store，它自身綁定了storage事件，這個時候寫入新的數據點擊保存，這時新的sotre數據保存了，但是頁面a的storage事件沒觸發，

而頁面b下，綁定的storage事件則觸發了。（ps：前提頁面a和b在同域下，並都是打開狀態不同視窗）；

頁面a代碼：

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title></title>  
</head>  
<body>  
<input type="text" placeholder="input date to save">  
<button>save</button>  
<script>  
  (function(D){  
    var val = D.getElementsByTagName("input")[0],  
      btn = D.getElementsByTagName("button")[0];  
    btn.onclick = function(){  
      var value = val.value;  
      if(!value) return;  
      localStorage.setItem("key", val.value);  
    };  
    window.addEventListener("storage", function(e){  
      console.log(e);  
    });  
  })(document);  
</script>  
</body>  
</html>

 

頁面b代碼：

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title></title>  
</head>  
<body>  
<script>  
  window.addEventListener("storage", function(e){  
    console.log(e);  
    document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)  
  });  
  
</script>  
</body>  
</html>

看到這裡是不是很疑惑那storage事件到底有什麼用，多視窗間多通信用到它就是最好選擇了，比如某塊公用內容區域基礎數據部分都是從store中提取的，這個區域中大多數頁面中都有，當用戶打開多個頁面時，在其中一個頁面做了數據修改，那其他頁面同步更新是不是很方便（當前頁面就要用其他方式處理了），當然用於視窗間通信它作用不僅僅如此，更多的大家可以利用它特性去發揮。

在上面的demo頁面b中storage的events對象的屬性常用的如下： 

 oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。 

 newValue：更新後的值。如果該鍵被刪除，則這個屬性為null。

 url：原始觸發storage事件的那個網頁的網址。 

 key：存儲store的key名；

 

參考：

1>http://www.cnblogs.com/jinguangguo/p/4083919.html

2> http://blog.csdn.net/nx8823520/article/details/30478859

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JFinal DB.tx()事務
    JFinal中有個封裝好的事務應用，用起來非常方便簡單。 寫法1： result值為true則操作成功，為false則回滾。 事務DB.tx()本身也返回一個boolean值，表示最終操作結果是否成功，true為成功，false失敗。 寫法2： 在方法前聲明@Before(Tx.class) 今天部 ...
  • ajax往後臺傳json格式數據報415錯誤
    問題描述： ajax往後臺傳json格式數據報415錯誤,如下圖所示 頁面代碼 後臺代碼 錯誤分析：415 （不支持的媒體類型） 請求的格式不受請求頁面的支持 正確的json格式{key:value, key:value}key和value應該都帶雙引號。上面的前臺代碼data中的數據value不帶 ...
  • Nodejs斷言測試
    var assert = require('assert');/*node中，我們可以使用assert模塊來測試代碼。equal()和notEqual()分別作相等性和不等性的判斷，第一個參數是期望值，第二個參數是真實值，第三個參數是異常信息*/// assert.equal(1,2,[consol ...
  • React開發入門
    目錄： 一、前言 二、什麼是React 三、開發環境搭建 四、預備知識 五、最簡單的React小程式 六、基礎語法介紹 七、總結 八、參考資料 目錄： 一、前言 二、什麼是React 三、開發環境搭建 四、預備知識 五、最簡單的React小程式 六、基礎語法介紹 七、總結 八、參考資料 一、前言 近 ...
  • 原生js實現的放大鏡效果
    這是我用原生js寫的放大鏡效果，與各種各樣的框架技術相比，我喜歡使用原生的js，在這裡，想和大家一起談談原生和框架技術的理解與個人喜好。 <!DOCTYPE HTML><html> <head> <title>js放大鏡效果</title> <meta http-equiv="content-typ ...
  • 開源造輪子：一個簡潔，高效，輕量級，酷炫的不要不要的canvas粒子運動插件庫
    一：開篇 哈哈哈，感謝標題黨的蒞臨~ 雖然標題有點誇張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。廢話不多說，先來看個標配例子吧： （codepen線上演示編輯：http://codepen.io/barrior/pen/XjEEBz） 是吧，應該是酷炫酷炫的吧，不喜歡的話可以向 ...
  • css實現左（右）側固定寬度，右（左）側寬度自適應 ---清除浮動
    老話長談，css的不固定適應佈局 不管是面試還是在平時的工作中，這樣的佈局形式一直都在用著，很常見，所以今天我就拿出來在嘮叨一下， 既是給自己一個備忘存儲，也是一個學習鞏固的參考，知道大家都會，還是要記憶一下，不為其他，就為打好基礎。 話說太多， 直接上代碼，一看就能明白。 也許你會不屑一顧的說簡單 ...
  • 前端學習筆記——Js函數function基礎理解
    學習內容來自：《JavaScript高級程式設計（第三版）》 正文：我們知道，在js中，函數實際上是一個對象，每個函數都是Function類型的實例，並且都與其他引用類型一樣具有屬性和方法。因此，函數名實際上是指向函數對象的指針，不與某個函數綁定。在常見的兩種定義方式（見下文）之外，還有一種定義的方 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類