由於HTML4時代Cookie的大小、格式、存儲數據格式等限制,網站應用如果想在瀏覽器端存儲用戶的部分信息,那麼只能藉助於Cookie。但是Cookie的這些限制,也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據。
下面是Cookie的限制:
大多數瀏覽器支持最大為4096 字節的Cookie。
瀏覽器還限制站點可以在用戶計算機上存儲的Cookie 的數量。大多數瀏覽器只允許每個站點存儲20 個Cookie;如果試圖存儲更多Cookie,則最舊的Cookie 便會被丟棄。
有些瀏覽器還會對它們將接受的來自所有站點的Cookie 總數作出絕對限制,通常為300 個。
Cookie默認情況都會隨著Http請求發送到後台服務器,但並不是所有請求都需要Cookie的,比如:js、css、圖片等請求則不需要Cookie。
為了破解Cookie的一系列限制,HTML5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器,而且支持複雜的本地數據庫,讓JS更有效率。 HTML5支持兩種的WebStorage:
H5本地存儲有兩個API,一個是Web Storage,還有一個是Web SQL。不管是哪一個,都是基於JavaScript語言來使用,接下來我就教你怎麼使用Web Storage
三、Web StorageHTML5 定義了本地存儲規範Web Storage , 提供了兩種存儲類型API: sessionStorage 和localStorage,二者的差異主要是數據的保存時長及數據的共享方式。
1.localStorage一直存儲在本地,數據存儲是永久的,除非用戶或程序對其進行刪除操作;localStorage 對象存儲的數據沒有時間限制。第二天、第二週或下一年之後,數據依然可用。特點:① 域內安全、永久保存。即客戶端或瀏覽器中來自同一域名的所有頁面都可訪問localStorage數據且數據除了刪除否則永久保存,但客戶端或瀏覽器之間的數據相互獨立。
② 數據不會隨著Http請求發送到後台服務器;
③ 存儲數據的大小機會不用考慮,因為在HTML5的標準中要求瀏覽器至少要支持到4MB。
看一個例子:
代碼如下:
function clickCounter(){ if(typeof(Storage)!==undefined){ if(localStorage.clickcount){ localStorage.clickcount=Number(localStorage.clickcount)+1; }else{ localStorage.clickcount=1; } document.getElementById (result).innerHTML= 你已經點擊了按鈕+ localStorage.clickcount + 次; }else{ document.getElementById(result).innerHTML=對不起,您的瀏覽器不支持web 存儲。 ; } } </script> <p><button onclick=clickCounter() type=button>點我! </button></p> <div id=result></div> <p>點擊該按鈕查看計數器的增加。 </p> <p>關閉瀏覽器選項卡(或窗口),重新打開此頁面,計數器將繼續計數(不是重置)。 </p> 2.sessionStorage在會話期內有效,數據在瀏覽器關閉後自動刪除;特點:會話控制、短期保存。會話概念與服務器端的session概念相似,短期保存指窗口或瀏覽器或客戶端關閉後自動消除數據。
相容性
注意:IE9 localStorage不支持本地文件,需要將項目署到服務器,才可以支持!
目前所有主流的瀏覽器都在一定程度上支持HTML5 的Web Storage特性。 由上圖可以看出,基本上所有現代瀏覽器都已經支持Web Storage。
Android平台和IOS 平台各自的瀏覽器都基本上支持Web Storage 本地存儲特性。 目前市場上的移動設備, 除了android 手機和iphone 手機外,越來越多的平板電腦面世,而且基本上依賴著兩種平台。在移動端使用Web Storage 我們幾乎不需要考慮瀏覽器是否支持, 當然從代碼的嚴謹來說,建議最好在使用前先檢查瀏覽器是否支持
下面是檢測方式:
if (window.localStorage) { // 瀏覽器支持localStorage }else{ // 不支持} if (window.sessionStorage) { // 瀏覽器支持sessionStorage }else{ // 不支持}三、localStorageHTML5 的本地存儲API 中的localStorage 與sessionStorage 在使用方法上是相同的,區別在於sessionStorage 在關閉頁面後即被清空,而localStorage 則會一直保存。我們這里以localStorage 為例,簡要介紹下html5 的本地存儲,並針對如遍歷等常見問題作一些示例說明。 localStorage 是Html5 本地存儲的API,使用鍵值對的方式進行存取數據,存取的數據只能是字符串。不同瀏覽器對該API 支持情況有所差異,如使用方法、最大存儲空間等。
存儲方式:以鍵值對(Key-Value)的方式存儲字符串。主要應用:購物車、客戶登錄、遊戲存檔。 。 。可儲存的數據類型:數組,圖片,json,樣式,腳本。 。 。 (只要是能序列化成字符串的內容都可以存儲)儲存地址: C:/Users/15014/AppData/Local/Google/Chrome/User Data/Default/Local Storage(不同電腦不一樣,需要打開隱藏文件顯示,但是在C盤搜索localStorage就能搜出這個文件夾。)localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。
(1)localStorage.setItem(鍵名,鍵值)在本地客戶端存儲一個字符串類型的數據,其中,第一個參數鍵名代表了該數據的標識符,而第二個參數鍵值為該數據本身。如:
localStorage.setItem(name, 張三); //存儲鍵名為name和鍵值為張三的數據到本地localStorage.setItem(age, 28); //存儲鍵名為age和鍵值為28的數據到本地
(2)localStorage.getItem(鍵名) 讀取已存儲在本地的數據,通過鍵名作為參數讀取出對應鍵名的數據。如:
var data = localStorage.getItem(name); alert(data);//張三
(3)localStorage.removeItem(鍵名)移除已存儲在本地的數據,通過鍵名作為參數刪除對應鍵名的數據。如:
var data2 = localStorage.removeItem(name);//從本地存儲中移除鍵名為name的數據alert(data2); //undefined
(4)localStorage.clear() 移除本地存儲所有數據。如:
localStorage.clear() 移除本地存儲所有數據。如: localStorage.clear(); //保存著的age/28和name/張三的鍵/值對也被移除了,所有本地數據拜拜
(5)另外,sessionStorage中的四個函數與以上localStorage類的函數用法基本一致,就不再詳解。
下面是一個小實例:
<script type=text/javascript> localStorage.setItem(name, 張三); localStorage.setItem(age, 28); verify(); //驗證本地存儲localStorage.removeItem(name); verify(); //驗證name是否存在localStorage.clear(); verify(); //驗證name和age是否存在//自定義驗證函數,驗證name和age的數據是否存在function verify(){ var type = localStorage.getItem(name) ; var price = localStorage.getItem(age); type = type ? type : '不存在'; price = price ? price : '不存在'; alert( name: + type + /n/n + age: + price ) ; } </script>三、localStorage過期策略由於html5沒有給本地存儲設置過期策略,那麼在處理數據的過期策略的時候可以編寫自己過期策略程序,如下:
<!DOCTYPE><head><meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Access-Control-Allow-Origin content=anonymous><title>locstorage過期策略</title></head><body></body></html><script>function set(key,value){ var curtime = new Date().getTime();//獲取當前時間localStorage .setItem(key,JSON.stringify({val:value,time:curtime}));//轉換成json字符串序列/* 說明: JSON.parse用於從一個字符串中解析出json對象,如var str = '{name:huangxiaojian,age:23}' 結果: JSON.parse(str) Object age: 23 name: huangxiaojian __proto__: Object 注意:單引號寫在{}外,每個屬性名都必須用雙引號,否則會拋出異常。 JSON.stringify()用於從一個對象解析出字符串,如var a = {a:1,b:2} 結果: JSON.stringify(a) {a:1,b:2} */}function get (key,exp)//exp是設置的過期時間{ var val = localStorage.getItem(key);//獲取存儲的元素var dataobj = JSON.parse(val);//解析出json對象if(new Date ().getTime() - dataobj.time > exp)//如果當前時間-減去存儲的元素在創建時候設置的時間> 過期時間{ console.log(expires);//提示過期}else{ console. log(val=+dataobj.val);}}</script>使用操作如下圖所示:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。