初識html5的localStorage本地存儲

来源:http://www.cnblogs.com/xmoomoo/archive/2016/08/10/5757464.html
-Advertisement-
Play Games

一、概述 HTML5 提供了兩種在客戶端存儲數據的新方法： localStorage - 沒有時間限制的數據存儲 sessionStorage - 針對一個 session 的數據存儲 之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳 ...


一、概述

HTML5 提供了兩種在客戶端存儲數據的新方法：

  • localStorage - 沒有時間限制的數據存儲
  • sessionStorage - 針對一個 session 的數據存儲

　　之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

　　在 HTML5 中，數據不是由每個伺服器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。

　　對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。

　　HTML5 使用 JavaScript 來存儲和訪問數據。

/************************源自w3c****************************/

二、用法小結

（一）設置值

1.　　localStorage.setItem(key,value):如果key的value存在時，更新key的值,例：localStorage.setItem("name","moomoo");【推薦寫法】

2.　　localStorage.name = "moomoo";

3.　　localStorage["name"] = "moomoo";

（二）獲取值

1.　　localStorage.getItem(key,value):如果key的value不存在時，返回null，例：localStorage.getItem("name");【推薦寫法】

2.　　var name = localStorage.name;

3.　　var name = localStorage["name"];

（三）清除值

1.　　localStorage.remove(key)，表示清除單項key的值，例:localStorage.remove("name");執行這句話就會清除name的值

2.　　localStorage.clear(),表示清除localStorage存儲的所有數據

（四）遍歷存儲的數據

當你不清楚本地localStorage存儲了多少數據的時候，用key(index)方法絕對是一個不錯的選擇，key(index)方法可以遍歷localStorage存儲的key。寫個簡單的例子：

for(i=0;i<localStorage.length;i++){

　　document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br/>");

}

localStorage.length表示本地存儲數據的總量；

localStorage.key(i),表示獲取第i個數據的key；

localStorage.getItem(localStorage.key(i))，表示獲取第i個數據的value。

（五）JSON存儲

當需要存儲的數據很多時，可以將數據存儲到數組中並轉換成JSON格式的數據。

1.　　JSON.stringify(data) 將對象轉換成JSON格式的數據串。

2.　　JSON.parse(data)將數據解析成對象並返回解析後的對象。

這樣說或許不太好懂，直接上例子：

var arr = {"name":"moomoo","age":2,"eat":"apple"};

localStorage.setItem("arr",JSON.stringify(arr));

arr = JSON.parse(localStorage.getItem("arr"));

 如果想要確定這些信息是否真的存儲在瀏覽器本地，拿谷歌舉例：在瀏覽器空白處右擊，選擇檢查（直接上圖好了）

這樣就可以很方便的審查存儲在本地的數據了。

不過需要註意的是：localStorage存儲的數據是不能跨瀏覽器共用的，也就是說存儲在瀏覽器的數據只能在這個瀏覽器中訪問，現在各個瀏覽器的存儲空間是5M。

（六）sessionStorage

　　sessionStorage是個全局對象，它維護著在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開著，頁面會話周期就會一直持續。當頁面重新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標簽或者新視窗中打開一個新頁面，都會初始化一個新的會話，也就是說sessionStorage針對一個 session 進行數據存儲。當用戶關閉瀏覽器視窗後，數據會被刪除。

　　當瀏覽器被意外刷新的時候，一些臨時數據應當被保存和恢復。sessionStorage 對象在處理這種情況的時候是最有用的。sessionStorage自動保存一個文本域中的內容，如果瀏覽器被意外刷新，則恢復該文本域中的內容，所以不會丟失任何輸入的數據。

　　sessionStorage 方法與localStorage的方法相似，這裡就不過多贅述。

（七）相容性

如圖可知並不是所有的瀏覽器都支持。如果你想在沒有原生支持localStorage對象的瀏覽器中使用它，可以在你編寫的 JavaScript代碼的首部插入下麵兩段代碼中的任意一段。

if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        var sExpDate = new Date();
        sExpDate.setDate(sExpDate.getDate() - 1);
        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
      }
      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
        if (iCouple.length > 1) {
          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

或

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      var sExpDate = new Date();
      sExpDate.setDate(sExpDate.getDate() - 1);
      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

大家自行領會……這兩段……表示不懂/(ㄒoㄒ)/~~

 


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

-Advertisement-
Play Games
更多相關文章
  • css 常用樣式
    font-family 設置字體名稱 可以使用多個名稱，用逗號分隔，瀏覽器則按照先後順序依次使用可用字體 font-size 設置字體大小 length 用長度值指定文字大小，不允許負值 percentage 用百分比指定文字大小，其百分比取值是基於父對象中字體的尺寸，不允許負值 font-weig ...
  • 原生態js，滑鼠按下後，經過了那些單元格
    本來是要判斷那些單元格被選中，結果發現行不通，只能判斷滑鼠按下後，經過了那些單元格 之所以發出來，是覺得案例還有很多有意思的地方 onmouseover 的持續觸發，導致了很多重覆元素 由於將事件綁定在整個table上，還出現了undefined 滑鼠的反覆進入進出，會導致相同元素的斷斷續續的重覆， ...
  • CSS3製作動畫的三個屬性
    CSS3屬性中有關於製作動畫的三個屬性：Transform,Transition,Animation；我們一起學習完了Transform和Transition，讓我們對元素實現了一些基本的動畫效果，這些我想足以讓大家激動了一陣子，今天我們趁著這個熱勁繼續第三個動畫屬性Animation的學習，單從A ...
  • js中對象使用
    簡單記錄javascript中對象的使用 一、創建對象 上面使用了兩種方式創建對象，一種是字面量的方式，另一種是使用new創建對象，new後面的Object叫做構造函數。 二、對象的訪問 從上面我們可以看到我們給對向o4增加了一個屬性name，使用的是點號的方式，即對象名.屬性名，這就是其中的一種訪 ...
  • js 獲取當前系統時間
    Js獲取當前日期時間及其它操作var myDate = new Date();myDate.getYear(); //獲取當前年份(2位)myDate.getFullYear(); //獲取完整的年份(4位,1970-????)myDate.getMonth(); //獲取當前月份(0-11,0代表 ...
  • 移動端行列佈局
    最近發現UC下通過display:inline-block佈局有點問題，全用最新版：Android6系統和最新版UC手機瀏覽器都還是有問題。 設計需求： 導航欄100%寬度，共有4個子欄目，每一個欄目占1/4寬度。 HTML代碼為： 方法一： 通過"display: inline-block;"來布 ...
  • js 自帶的 sort() 方法
    1. 方法概述 Array的sort()方法預設把所有元素先轉換為String再根據Unicode排序， sort()會改變原數組，並返回改變（排序）後的數組　。 2. 例子 2.1 如果沒有提供自定義的方法， 數組元素會被轉換成字元串，並返回字元串在Unicode編碼下的順序比較結果 2.2 利用 ...
  • 用TypeScript開發Vue——如何通過vue實例化對象訪問實際ViewModel對象
    背景 我個人很喜歡TypeScript也很喜歡Vue，但在兩者共同使用的時候遇到一些問題。 Vue的實例化對象代理了所有實際ViewModel對象，具體可參見官方文檔（ http://vuejs.org.cn/guide/instance.html 屬性與方法） Vue的屬性與方法： 每個 Vue ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類