整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          html5之Localstorage本地存儲詳解


          ocalstorage本地存儲基本用法

          如何創(chuàng)建和訪問 localStorage

          <script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

          上面就創(chuàng)建了一個localStorage。

          我們再來做一個刷新頁面,增加訪問次數(shù)的功能!很簡單,代碼如下:

          <script type="text/javascript">if (localStorage.pagecount)

          ?{

          ?localStorage.pagecount=Number(localStorage.pagecount) +1;

          ?}else

          ?{

          ?localStorage.pagecount=1;

          ?}document.write("Visits "+ localStorage.pagecount + " time(s).");</script>

          上面是用點的方式進行操作,localStorage還有存儲API,具體如下:

          • 調(diào)用setItem()方法,將對應(yīng)的名字和值傳遞出去,可以實現(xiàn)數(shù)據(jù)存儲

          • 調(diào)用getItem()方法,將名字傳遞出去,可以獲取對應(yīng)的值

          • 調(diào)用removeItem()方法,名稱作為參數(shù),可以刪除對應(yīng)的數(shù)據(jù)

          • 調(diào)用clear()方法,可以刪除所有存儲的數(shù)據(jù)

          • 使用length屬性以及key()方法,傳入0~length-1的數(shù)字,可以枚舉所有存儲數(shù)據(jù)的名字

          用法如下:

          localStorage.setItem("name", "haorooms"); ? ?// 以"name"為名字存儲一個字符串localStorage.getItem("name"); ? ? ? ? ? ?// 獲取"name"的值// 枚舉所有存儲的名字/值對for(var i=0; i<localStorage.length; i++){ ? ? ? ?// length表示所有的名值對總數(shù)

          ? ?var name = localStorage.key(i); ? ? ? ? ? ?// 獲取第i對的名字

          ? ?var value = localStorage.getItem(name); ? ? ? ?// 獲取該對的值}localStorage.removeItem("name"); ? ? ? ?// 刪除"name"項localAStorage.clear(); ? ? ? ? ? ? ? ?// 全部刪除

          sessionStorage和Localstorage區(qū)別

          sessionStorage用法和Localstorage用法一樣,區(qū)別就是,sessionStorage是會話存儲,關(guān)閉瀏覽器,存儲內(nèi)容就會被清除。

          低版本瀏覽器存儲兼容方案

          IE User Data

          微軟在IE5及之后的IE瀏覽器中實現(xiàn)了它專屬的客戶端存儲機制——“userData”。

          userData可以實現(xiàn)一定量的字符串數(shù)據(jù)存儲,對于IE8以前的IE瀏覽器中,可以將其用作是Web存儲的替代方案。

          iLocalStorage插件

          由于IE8以下瀏覽器的本地存儲API不一樣,所以就寫了個插件兼容各大瀏覽器存儲。提供的方法及用法如下:

          getItem: 獲取屬性setItem: 設(shè)置屬性removeItem: 刪除屬性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');

          插件代碼

          /**

          * LocalStorage 本地存儲兼容函數(shù)

          * getItem: 獲取屬性

          * setItem: 設(shè)置屬性

          * removeItem: 刪除屬性

          *

          *

          * @example

          *

          ? ?iLocalStorage.setItem('key', 'value');

          ? ?console.log(iLocalStorage.getItem('key'));

          ? ?iLocalStorage.removeItem('key');

          *

          */(function(window, document){

          ? ?// 1. IE7下的UserData對象

          ? ?var UserData = {

          ? ? ? ?userData: null,

          ? ? ? ?name: location.href,

          ? ? ? ?init: function(){

          ? ? ? ? ? ?// IE7下的初始化

          ? ? ? ? ? ?if(!UserData.userData){

          ? ? ? ? ? ? ? ?try{

          ? ? ? ? ? ? ? ? ? ?UserData.userData = document.createElement("INPUT");

          ? ? ? ? ? ? ? ? ? ?UserData.userData.type = "hidden";

          ? ? ? ? ? ? ? ? ? ?UserData.userData.style.display = "none";

          ? ? ? ? ? ? ? ? ? ?UserData.userData.addBehavior("#default#userData");

          ? ? ? ? ? ? ? ? ? ?document.body.appendChild(UserData.userData);

          ? ? ? ? ? ? ? ? ? ?var expires = new Date();

          ? ? ? ? ? ? ? ? ? ?expires.setDate(expires.getDate() + 365);

          ? ? ? ? ? ? ? ? ? ?UserData.userData.expires = expires.toUTCString();

          ? ? ? ? ? ? ? ?} catch(e){

          ? ? ? ? ? ? ? ? ? ?return false;

          ? ? ? ? ? ? ? ?}

          ? ? ? ? ? ?}

          ? ? ? ? ? ?return true;

          ? ? ? ?},

          ? ? ? ?setItem: function(key, value){

          ? ? ? ? ? ?if(UserData.init()){

          ? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);

          ? ? ? ? ? ? ? ?UserData.userData.setAttribute(key, value);

          ? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);

          ? ? ? ? ? ?}

          ? ? ? ?},

          ? ? ? ?getItem: function(key){

          ? ? ? ? ? ?if(UserData.init()){

          ? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);

          ? ? ? ? ? ? ? ?return UserData.userData.getAttribute(key);

          ? ? ? ? ? ?}

          ? ? ? ?},

          ? ? ? ?removeItem: function(key){

          ? ? ? ? ? ?if(UserData.init()){

          ? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);

          ? ? ? ? ? ? ? ?UserData.userData.removeAttribute(key);

          ? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);

          ? ? ? ? ? ?}

          ? ? ? ?}

          ? ?};

          ? ?// 2. 兼容只支持globalStorage的瀏覽器

          ? ?// 使用: var storage = getLocalStorage();

          ? ?function getLocalStorage(){

          ? ? ? ?if(typeof localStorage == "object"){

          ? ? ? ? ? ?return localStorage;

          ? ? ? ?} else if(typeof globalStorage == "object"){

          ? ? ? ? ? ?return globalStorage[location.href];

          ? ? ? ?} else if(typeof userData == "object"){

          ? ? ? ? ? ?return globalStorage[location.href];

          ? ? ? ?} else{

          ? ? ? ? ? ?throw new Error("不支持本地存儲");

          ? ? ? ?}

          ? ?}

          ? ?var storage = getLocalStorage();

          ? ?function iLocalStorage(){

          ? ?}

          ? ?// 高級瀏覽器的LocalStorage對象

          ? ?iLocalStorage.prototype = {

          ? ? ? ?setItem: function(key, value){

          ? ? ? ? ? ?if(!window.localStorage){

          ? ? ? ? ? ? ? ?UserData.setItem(key, value);

          ? ? ? ? ? ?}else{

          ? ? ? ? ? ? ? ?storage.setItem(key, value);

          ? ? ? ? ? ?}

          ? ? ? ?},

          ? ? ? ?getItem: function(key){

          ? ? ? ? ? ?if(!window.localStorage){

          ? ? ? ? ? ? ? ?return UserData.getItem(key);

          ? ? ? ? ? ?}else{

          ? ? ? ? ? ? ? ?return storage.getItem(key);

          ? ? ? ? ? ?}

          ? ? ? ?},

          ? ? ? ?removeItem: function(key){

          ? ? ? ? ? ?if(!window.localStorage){

          ? ? ? ? ? ? ? ?UserData.removeItem(key);

          ? ? ? ? ? ?}else{

          ? ? ? ? ? ? ? ?storage.removeItem(key);

          ? ? ? ? ? ?}

          ? ? ? ?}

          ? ?}

          ? ?if (typeof module == 'object') {

          ? ? ? ?module.exports = new iLocalStorage();

          ? ?}else {

          ? ? ? ?window.iLocalStorage = new iLocalStorage();

          ? ?}})(window, document);

          其他插件

          localForage:https://github.com/mozilla/localForage

          store.js:https://github.com/marcuswestin/store.js

          ------------------

          切圖網(wǎng)(qietu.com)是一家專門從事html5前端開發(fā)的服務(wù)機構(gòu),長期致力于提供高品質(zhì)的psd轉(zhuǎn)html5、響應(yīng)式切圖、webapp切圖,h5切圖等web前端開發(fā)服務(wù)。

          專注web前端開發(fā)技術(shù),關(guān)注用戶體驗,加我們公眾微信賬號:qietuwang(長按復(fù)制)

          ebStorage的目的是克服由cookie所帶來的一些限制,當數(shù)據(jù)需要被嚴格控制在客戶端時,不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。

          WebStorage兩個主要目標:

          (1)提供一種在cookie之外存儲會話數(shù)據(jù)的路徑。

          (2)提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制。

          web存儲更加安全與快速,這些數(shù)據(jù)還不會保存到服務(wù)器,還可以存儲大量數(shù)據(jù)而不影響網(wǎng)站性能。

          web 存儲類型

          1. localStorage - 用于長久保存數(shù)據(jù),沒有有效期,直到手動清除。
          2. sessionStorage - 臨時保存當前窗口的數(shù)據(jù),窗口關(guān)閉之后自動清除。

          不管是 localStorage 還是 sessionStorage 使用方法都是一樣的語法,對常見操作語法進行示范。以下就以localStorage為例:

          常見操作語法:

          • 保存數(shù)據(jù):

          localStorage.key = value

          localStorage.setItem(key,value)

          • 獲取數(shù)據(jù)

          localStorage.key

          localStorage.getItem(key)

          • 刪除單個數(shù)據(jù):

          localStorage.removeItem(key)

          delete localStorage.key

          • 刪除全部:localStorage.clear()
          • 獲取某個索引的鍵值:localStorage.key(index)

          數(shù)據(jù)都是以鍵值對形式存在的,操作的時候與json有點類似。

          web存儲數(shù)據(jù)應(yīng)用

          應(yīng)用1:取出本地存儲的所有數(shù)據(jù),以localStorage為例。

          localStorage和sessionStorage是兩個對象,類似json。可遍歷取出數(shù)據(jù),如:

          localStorage.user = "倩倩"
          localStorage.age = "18"
          localStorage.job = "打雜"
          console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}
          for(key in localStorage){
           console.log(`${key}--${localStorage[key]}`)
          }

          運行程序之后,結(jié)果如圖:


          我們發(fā)現(xiàn)遍歷的時候把localStorage的屬性和方法全部打印出來了,而我們需要的只是我們存儲的三個數(shù)據(jù),其余的都不要,此時我們換個方法。

          localStorage.user = "倩倩"
          localStorage.age = "18"
          localStorage.job = "打雜"
          console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}
          for(let i=0;i<localStorage.length;i++){
           let key = localStorage.key(i)
           console.log(`${key}:${localStorage[key]}`)
          }

          此時運行結(jié)果就是我們需要的結(jié)果了!

          記住用戶登錄信息、存草稿、存郵件等經(jīng)常會使用 localStorage,我們介紹下幾種存儲方式的區(qū)別,可以更好地根據(jù)需求選擇存儲方式。

          幾種存儲方式區(qū)別

          cookies 和 sessionStorage、localStorage區(qū)別如圖:

          上述看三者存儲大小有很大差異,存儲內(nèi)容上也不同,cookie只能保存字符串類型,但sessionStorage和localStorage能夠支持任何類型的對象存儲。如果保存復(fù)雜json數(shù)據(jù)時,可以轉(zhuǎn)成字符串保存,取出時通過JSON.parse()轉(zhuǎn)成json格式。

          安全性方面,web 存儲不會發(fā)送到服務(wù)器端,不用擔心被截獲,所以相對cookie安全些。

          實例:網(wǎng)頁中寫信,自動保存草稿,網(wǎng)頁關(guān)閉重新打開之后數(shù)據(jù)依舊存在。

          <textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea>
          <script>
           function save(){
            var x = document.getElementById("email")
            localStorage.setItem('email',x.value)
           }
           window.onload =function(){
            var x = document.getElementById("email")
            x.value = localStorage.getItem("email")
           }
          </script>

          注意:如果你是直接使用瀏覽器打開html文件,此時發(fā)現(xiàn)并不會存儲,需要聲明下存儲是針對域的,所以我們需要放到服務(wù)內(nèi),服務(wù)內(nèi)訪問才可以進行緩存。

          需要的同學自己去下載個nginx。

          地存儲

          1 本地存儲簡介

          在客戶端存儲數(shù)據(jù)

          HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法:

          localStorage - 沒有時間限制的數(shù)據(jù)存儲

          sessionStorage - 針對一個 session 的數(shù)據(jù)存儲

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

          HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。

          2 語法

          localStorage 方法存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后, 數(shù)據(jù)依然可用。

          localStorage 和sessionStorage分別是本地存儲和會話存儲, 統(tǒng)稱本地存儲。

          存儲數(shù)據(jù):localStorage.setItem('key','value');

          讀取數(shù)據(jù):localStorage.getItem('key')


          刪除指定數(shù)據(jù):localStorage.removeItem('key');

          清空所有數(shù)據(jù):localStorage.clear()

          <!DOCTYPE html>
          <html lang="zh">
          <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Document</title>
          </head>
          <body>
          <!--
          本地存儲存在自己電腦上了 他不能和服務(wù)器交互
          一種:本地存儲(永久存儲不會過期)localStorage
          一種:臨時會話(頁面關(guān)閉數(shù)據(jù)就沒了)sessionStorage
          統(tǒng)稱本地存儲
          二者的方法一毛一樣 咱們只以一個舉例子
          
          cookie->可以喝服務(wù)器交互 是可以設(shè)置過期時間的
          -->
          <script type="text/javascript">
          console.log(localStorage)
          console.log(sessionStorage)
          
          //寫入東西(隨便寫,你存儲的值)
          //localStorage.setItem(key(小卡片),value(你存的包))
          
          localStorage.setItem("key001","梁永燦");
          localStorage.setItem("key002","迪麗熱巴");
          localStorage.setItem("key003","楊穎");
          localStorage.setItem("key004","大黃");
          localStorage.setItem("key004","小黃");
          
          
          //讀取
          console.log(localStorage.getItem("key001"))
          //console.log(localStorage)
          
          //刪除
          localStorage.removeItem("key001");
          
          //全部刪除
          localStorage.clear()
          
          
          </script>
          </body>
          </html>

          本地存儲數(shù)據(jù)庫會自動的為每一個網(wǎng)站(IP地址)建立一個獨立的表格, 在同一個網(wǎng)站(IP地址)下數(shù)據(jù)是可以共享的, 但是不能跨域。

          不能跨瀏覽器存儲, 每個瀏覽器都有自己的小數(shù)據(jù)庫, Chrome存儲的, 火狐看不見。

          localStorage是簡單的數(shù)據(jù)庫, 沒有查詢功能, 不能用sql操作, 只能簡單的存儲、讀取k-v對。

          sessionStorage 瀏覽器窗口一旦關(guān)閉, 數(shù)據(jù)就丟失了

          localStorage存儲的數(shù)據(jù), 永遠不丟失, 關(guān)機, 重啟都不會導(dǎo)致數(shù)據(jù)丟失, 除非清除了瀏覽器記錄

          注意: 判斷l(xiāng)ocalStorage和sessionStorage是否有數(shù)據(jù)使用if直接判斷

          if(localStorage.getItem("key001")){
          }

          不能使用


          主站蜘蛛池模板: 韩国福利影视一区二区三区| 人妻少妇精品视频三区二区一区| 日韩精品一区二区三区中文| 亚洲国产成人久久一区久久| 国产精品盗摄一区二区在线| 成人精品视频一区二区三区不卡| 精品视频一区二区三区免费| 欧美日韩综合一区二区三区| 日本一区二区三区在线视频 | 中文字幕一区二区三区精彩视频| 亚洲一区二区三区首页| 国产人妖在线观看一区二区| 高清国产精品人妻一区二区| 精品国产一区二区三区久| 亚洲一区二区三区深夜天堂| 交换国产精品视频一区| 日本一区二区三区精品视频| 精品无码一区二区三区电影| 无码人妻精品一区二区三区久久 | 91精品福利一区二区三区野战| 无码人妻精品一区二区在线视频| 日本中文字幕一区二区有码在线| 天堂va在线高清一区| 精品成人av一区二区三区| 国产精品久久久久久麻豆一区| 国偷自产av一区二区三区| 成人在线观看一区| 国产精品特级毛片一区二区三区| 国产亚洲情侣一区二区无码AV| 无码日本电影一区二区网站| 国产成人精品a视频一区| 亚洲日本久久一区二区va| 精品伦精品一区二区三区视频| 色老板在线视频一区二区| 中文字幕乱码亚洲精品一区| 精品无码一区二区三区电影| 亚洲一区精品无码| 亚洲av鲁丝一区二区三区| 精品国产亚洲一区二区在线观看| 怡红院AV一区二区三区| 亚洲综合无码一区二区三区 |