整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML5新特性之localStorage與sess

          HTML5新特性之localStorage與sessionStorage使用技巧

          我們都知道localStorage與sessionStorage是用于本地存儲的,那么我們該如何獲取本地存儲的大小呢?

          如何監聽storage事件,并作出后續處理呢?

          今天這篇我們就一起來看看吧,文中的算法代碼,已經放到了github上了,感興趣的同學可以自取。

          https://github.com/zhouxiongking/article-pages/tree/master/articles/H5Storage

          HTML5

          獲取本地最大存儲上限

          localStorage與sessionStorage是一樣的,我們就以localStorage為例進行代碼編寫。

          主要思想:在localStorage中存儲的信息都是{key: value}的字符串形式,所以只要我們通過setItem方法不停的加存儲值的長度,直到拋出異常為止,我們就可以在catch中獲取到本地存儲的最大值。

          通過以上的思想,我們可以得到以下的代碼。

          獲取本地最大存儲的方法

          我們可以直接將上述代碼復制到控制臺的console欄下運行,就可以得到瀏覽器的本地最大存儲的大小。

          以下是在Chrome瀏覽器下的運行結果,從中可以看出Chrome瀏覽器的本地最大存儲大小為5.12M。

          Chrome瀏覽器下

          以下是在Safari瀏覽器下的運行結果,從中可以看出Safari瀏覽器的本地存儲大小為2.56M。

          Safari瀏覽器下

          從實際的運行結果可以看出不同的瀏覽器的本地存儲localStorage大小是不同的。

          如果想看看其他的瀏覽器的localStorage最大值,可以直接運行上述代碼。

          獲取localStorage的剩余容量

          有的時候我們在使用localStorage存放數據時,需要知道當前還剩余多少容量,該怎么辦呢?

          主要思想:我們同樣用到localStorage中存放值是{key: value}字符串的原理。

          • 先通過上一節中的方法獲取localStorage存儲的最大值

          • 在for...in循環中,通過getItem方法獲取所有已經使用的存儲,然后累加起來

          • 最大值減去已經使用的存儲空間,即可獲取剩余的容量

          通過以上的思想,我們可以得到以下的代碼。

          獲取剩余容量

          通過上述的代碼我們就可以獲取localStorage的剩余容量了。

          storage事件

          當localStorage或者sessionStorage中存儲的值發生變化時,就會觸發storage事件。

          類似于click事件一樣,localStorage與sessionStorage也可以觸發storage事件,其定義的方式也是一樣,可以通過addEventListener來實現。

          但是需要注意的是:在默認情況下storage事件的觸發是發生在同源下的不同頁面中的。

          上面這句話的意思是,如果我們在一個頁面修改localStorage中存儲的值,然后在同一個頁面設置storage事件,這樣是無效的。

          當然我們可以修改默認的storage事件,改為自定義的方式,這個放在下節來講。

          為了印證上述的觀點,我們使用兩個頁面,在頁面A中通過localStorage給變量name設置初始值kingx,并且設置監聽storage事件,然后在頁面B中改變變量name的值為kingx2,最后來看看是否觸發了頁面A的storage事件。

          頁面A的代碼如下。

          頁面A

          頁面B的代碼如下。

          頁面B

          當我們運行了頁面A和頁面B后,然后在頁面B點擊change按鈕,修改name的值,然后回到頁面A去查看console控制臺,會發現有以下的結果。

          測試結果

          通過上述結果可以看出觀點的正確性。

          自定義storage事件

          如果我們想要在當前頁面監聽修改localStorage值的事件,該如何實現呢?

          可以通過自定義storage事件來實現。storage事件實際是在調用setItem時觸發,因此我們只需要自定義setItem方法即可。

          同一個頁面下,在自定義的setItem方法中,自定義一個事件,然后使用window監聽這個自定義事件。

          得到的代碼如下。

          自定義storage事件

          我們可以通過以下的代碼來進行驗證。

          測試代碼

          運行的結果和上一節的結果是一樣的。

          結束語

          本篇文章中主要介紹了與localStorage的幾個算法,大家學會了嗎?

          essionStorage 是HTML5新增的一個會話存儲對象,用于臨時保存同一窗口(或標簽頁)的數據,在關閉窗口或標簽頁之后將會刪除這些數據。本篇主要介紹 sessionStorage(會話存儲)的使用方式。包括添加、修改、刪除等操作。

          說明:

          sessionStorage 是HTML5新增的一個會話存儲對象,用于臨時保存同一窗口(或標簽頁)的數據,在關閉窗口或標簽頁之后將會刪除這些數據。

          在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 調用此對象。

          適用場景:

          sessionStorage 非常適合SPA(單頁應用程序),可以方便在各業務模塊進行傳值。

          其實:

          html5中的Web Storage包括了兩種存儲方式:sessionStorage和localStorage。

          sessionStorage:關閉頁面就會銷毀存儲的數據

          localStorage:用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

          -------下面我們來看看他有哪些屬性和方法-------

          屬性:

          readonly int sessionStorage.length //返回一個整數,表示存儲在 sessionStorage 對象中的數據項(鍵值對)數量。

          方法:

          string sessionStorage.key(int index) //返回當前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。

          string sessionStorage.getItem(string key) //返回鍵名(key)對應的值(value)。若沒有返回null。

          void sessionStorage.setItem(string key, string value) //該方法接受一個鍵名(key)和值(value)作為參數,將鍵值對添加到存儲中;如果鍵名存在,則更新其對應的值。

          void sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 對象中移除。

          void sessionStorage.clear() //清除 sessionStorage 對象所有的項。

          -------示例-------

          存儲數據

          //采用setItem()方法存儲

          sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

          //通過屬性方式存儲

          sessionStorage['testKey']='這是一個測試的value值';

          讀取數據

          //通過getItem()方法取值

          sessionStorage.getItem('testKey'); //=> 返回testKey對應的值

          //通過屬性方式取值

          sessionStorage['testKey']; //=> 這是一個測試的value值

          它也可以存儲對象(sessionStorage也可存儲Json對象:存儲時,通過JSON.stringify()將對象轉換為文本格式;讀取時,通過JSON.parse()將文本轉換回對象。)

          var userEntity={

          name: 'tom',

          age: 22

          };

          // 存儲值:將對象轉換為Json字符串

          sessionStorage.setItem('user', JSON.stringify(userEntity));

          // 取值時:把獲取到的Json字符串轉換回對象

          var userJsonStr=sessionStorage.getItem('user');

          userEntity=JSON.parse(userJsonStr);

          console.log(userEntity.name);

          數組:

          var arra=[1,2,3,4];

          localStorage.setItem('key',JSON.stringify(arra));

          var read=JSON.parse(localStorage.getItem('key'));

          console.log(read,read.length);

          注意: 

          1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作,這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基于同一主機名,忽略協議(HTTP和HTTPS)和端口號的要求)

          2) 單標簽頁限制。sessionStorage操作限制在單個標簽頁中,在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。

          3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器,只會在本地生效,并在關閉標簽頁后清除數據。(若使用Chrome的恢復標簽頁功能,seesionStorage的數據也會恢復)。

          4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串,也會在存儲時轉換為字符串。true值會轉換為"true")。

          5) 存儲上限限制:不同的瀏覽器存儲的上限也不一樣,但大多數瀏覽器把上限限制在5MB以下

          瀏覽器版本支持:

          支持sessionStorage的瀏覽器最小版本:IE8、Chrome 5。


          再來個小demo:

          樣式:

          1 #container { 2 border: 2px solid gray; 3 width: 320px; 4 text-align:center; 5 }

          html:

           1 <div id="container">
           2 <br>
           3 <label for="username">姓名:</label>
           4 <input type="text" id="username" name="username">
           5 <br>
           6 <label for="mobilephone">手機:</label>
           7 <input type="text" id="mobilephone" name="mobilephone">
           8 <br><br>
           9 <input type="button" onclick="add()" id="add" value="增加聯系人">
          10 <br><br>
          11 <hr>
          12 <label for="search">輸入姓名:</label>
          13 <input type="text" id="search" name="search">
          14 <br><br>
          15 <input type="button" onclick="find()" id="find" value="查找手機號">
          16 <p id="result"><br></p>
          17 </div>
          

          js:

          我們都知道localStorage與sessionStorage是用于本地存儲的,那么我們該如何獲取本地存儲的大小呢?

          如何監聽storage事件,并作出后續處理呢?

          今天這篇我們就一起來看看吧,文中的算法代碼,已經放到了github上了,感興趣的同學可以自取。

          https://github.com/zhouxiongking/article-pages/tree/master/articles/H5Storage

          HTML5

          獲取本地最大存儲上限

          localStorage與sessionStorage是一樣的,我們就以localStorage為例進行代碼編寫。

          主要思想:在localStorage中存儲的信息都是{key: value}的字符串形式,所以只要我們通過setItem方法不停的加存儲值的長度,直到拋出異常為止,我們就可以在catch中獲取到本地存儲的最大值。

          通過以上的思想,我們可以得到以下的代碼。

          獲取本地最大存儲的方法

          我們可以直接將上述代碼復制到控制臺的console欄下運行,就可以得到瀏覽器的本地最大存儲的大小。

          以下是在Chrome瀏覽器下的運行結果,從中可以看出Chrome瀏覽器的本地最大存儲大小為5.12M。

          Chrome瀏覽器下

          以下是在Safari瀏覽器下的運行結果,從中可以看出Safari瀏覽器的本地存儲大小為2.56M。

          Safari瀏覽器下

          從實際的運行結果可以看出不同的瀏覽器的本地存儲localStorage大小是不同的。

          如果想看看其他的瀏覽器的localStorage最大值,可以直接運行上述代碼。

          獲取localStorage的剩余容量

          有的時候我們在使用localStorage存放數據時,需要知道當前還剩余多少容量,該怎么辦呢?

          主要思想:我們同樣用到localStorage中存放值是{key: value}字符串的原理。

          • 先通過上一節中的方法獲取localStorage存儲的最大值

          • 在for...in循環中,通過getItem方法獲取所有已經使用的存儲,然后累加起來

          • 最大值減去已經使用的存儲空間,即可獲取剩余的容量

          通過以上的思想,我們可以得到以下的代碼。

          獲取剩余容量

          通過上述的代碼我們就可以獲取localStorage的剩余容量了。

          storage事件

          當localStorage或者sessionStorage中存儲的值發生變化時,就會觸發storage事件。

          類似于click事件一樣,localStorage與sessionStorage也可以觸發storage事件,其定義的方式也是一樣,可以通過addEventListener來實現。

          但是需要注意的是:在默認情況下storage事件的觸發是發生在同源下的不同頁面中的。

          上面這句話的意思是,如果我們在一個頁面修改localStorage中存儲的值,然后在同一個頁面設置storage事件,這樣是無效的。

          當然我們可以修改默認的storage事件,改為自定義的方式,這個放在下節來講。

          為了印證上述的觀點,我們使用兩個頁面,在頁面A中通過localStorage給變量name設置初始值kingx,并且設置監聽storage事件,然后在頁面B中改變變量name的值為kingx2,最后來看看是否觸發了頁面A的storage事件。

          頁面A的代碼如下。

          頁面A

          頁面B的代碼如下。

          頁面B

          當我們運行了頁面A和頁面B后,然后在頁面B點擊change按鈕,修改name的值,然后回到頁面A去查看console控制臺,會發現有以下的結果。

          測試結果

          通過上述結果可以看出觀點的正確性。

          自定義storage事件

          如果我們想要在當前頁面監聽修改localStorage值的事件,該如何實現呢?

          可以通過自定義storage事件來實現。storage事件實際是在調用setItem時觸發,因此我們只需要自定義setItem方法即可。

          同一個頁面下,在自定義的setItem方法中,自定義一個事件,然后使用window監聽這個自定義事件。

          得到的代碼如下。

          自定義storage事件

          我們可以通過以下的代碼來進行驗證。

          測試代碼

          運行的結果和上一節的結果是一樣的。

          結束語

          本篇文章中主要介紹了與localStorage的幾個算法,大家學會了嗎?


          主站蜘蛛池模板: 麻豆一区二区三区精品视频| 中文乱码字幕高清一区二区| 国内精品无码一区二区三区| 国产激情无码一区二区| 亚洲日韩AV一区二区三区中文| 99久久精品国产高清一区二区| 国产成人一区二区三区免费视频| 欧洲无码一区二区三区在线观看 | 老熟妇仑乱一区二区视頻| 一区二区三区在线免费观看视频| av无码免费一区二区三区| 亚洲av无码一区二区三区网站| 亚洲一区视频在线播放| 日韩一区二区三区电影在线观看| 日本一区二区三区爆乳| 日本片免费观看一区二区| 久久精品一区二区三区四区 | 老熟妇仑乱视频一区二区| 福利一区二区三区视频在线观看| 国产91一区二区在线播放不卡| 免费无码AV一区二区| 精品一区二区三区水蜜桃| 国产精品电影一区二区三区| 成人在线观看一区| 在线精品一区二区三区电影| 在线观看国产一区二三区| 人妻少妇精品视频三区二区一区 | 一区二区三区杨幂在线观看| 日本韩国黄色一区二区三区| 国产伦精品一区三区视频| 日韩精品一区二区午夜成人版| 精品一区中文字幕| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 一区二区三区日韩精品| 97av麻豆蜜桃一区二区| 一区二区三区在线观看| 日韩免费一区二区三区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 日韩精品无码一区二区中文字幕 | 无码精品久久一区二区三区 | 国精品无码一区二区三区左线|