這篇文章主要介紹了H5本地儲(chǔ)存Web Storage的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括鶴城網(wǎng)站建設(shè)、鶴城網(wǎng)站制作、鶴城網(wǎng)頁制作以及鶴城網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,鶴城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鶴城省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
一、本地存儲(chǔ)由來的背景
由于HTML4時(shí)代Cookie的大小、格式、存儲(chǔ)數(shù)據(jù)格式等限制,網(wǎng)站應(yīng)用如果想在瀏覽器端存儲(chǔ)用戶的部分信息,那么只能借助于Cookie。但是Cookie的這些限制,也就導(dǎo)致了Cookie只能存儲(chǔ)一些ID之類的標(biāo)識(shí)符等簡單的數(shù)據(jù)。
下面是Cookie的限制:
大多數(shù)瀏覽器支持最大為 4096 字節(jié)的 Cookie。
瀏覽器還限制站點(diǎn)可以在用戶計(jì)算機(jī)上存儲(chǔ)的 Cookie 的數(shù)量。大多數(shù)瀏覽器只允許每個(gè)站點(diǎn)存儲(chǔ) 20 個(gè)Cookie;如果試圖存儲(chǔ)更多 Cookie,則最舊的 Cookie 便會(huì)被丟棄。
有些瀏覽器還會(huì)對(duì)它們將接受的來自所有站點(diǎn)的 Cookie 總數(shù)作出絕對(duì)限制,通常為 300 個(gè)。
Cookie默認(rèn)情況都會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器,但并不是所有請(qǐng)求都需要Cookie的,比如:js、css、圖片等請(qǐng)求則不需要Cookie。
為了破解Cookie的一系列限制,HTML5通過JS的新的API就能直接存儲(chǔ)大量的數(shù)據(jù)到客戶端瀏覽器,而且支持復(fù)雜的本地?cái)?shù)據(jù)庫,讓JS更有效率。 HTML5支持兩種的WebStorage:
永久性的本地存儲(chǔ)(localStorage)
會(huì)話級(jí)別的本地存儲(chǔ)(sessionStorage)
二、本地存儲(chǔ)的分類
H5本地存儲(chǔ)有兩個(gè)API,一個(gè)是Web Storage,還有一個(gè)是Web SQL。不管是哪一個(gè),都是基于JavaScript語言來使用,接下來我就教你怎么使用Web Storage
三、Web Storage
HTML5 定義了本地存儲(chǔ)規(guī)范 Web Storage , 提供了兩種存儲(chǔ)類型 API: sessionStorage 和 localStorage,二者的差異主要是數(shù)據(jù)的保存時(shí)長及數(shù)據(jù)的共享方式。
1.localStorage一直存儲(chǔ)在本地,數(shù)據(jù)存儲(chǔ)是永久的,除非用戶或程序?qū)ζ溥M(jìn)行刪除操作;localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后,數(shù)據(jù)依然可用。
特點(diǎn):① 域內(nèi)安全、永久保存。即客戶端或?yàn)g覽器中來自同一域名的所有頁面都可訪問localStorage數(shù)據(jù)且數(shù)據(jù)除了刪除否則永久保存,但客戶端或?yàn)g覽器之間的數(shù)據(jù)相互獨(dú)立。
② 數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器;
③ 存儲(chǔ)數(shù)據(jù)的大小機(jī)會(huì)不用考慮,因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB。
看一個(gè)例子:
代碼如下:
function clickCounter(){ if(typeof(Storage)!=="undefined"){ if(localStorage.clickcount){ localStorage.clickcount=Number(localStorage.clickcount)+1; }else{ localStorage.clickcount=1; } document.getElementById("result").innerHTML=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 "; }else{ document.getElementById("result").innerHTML="對(duì)不起,您的瀏覽器不支持 web 存儲(chǔ)。"; } } </script> <p><button onclick="clickCounter()" type="button">點(diǎn)我!</button></p> <div id="result"></div> <p>點(diǎn)擊該按鈕查看計(jì)數(shù)器的增加。</p> <p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),重新打開此頁面,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
2.sessionStorage在會(huì)話期內(nèi)有效,數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
特點(diǎn):會(huì)話控制、短期保存。會(huì)話概念與服務(wù)器端的session概念相似,短期保存指窗口或?yàn)g覽器或客戶端關(guān)閉后自動(dòng)消除數(shù)據(jù)。
兼容性
注意:IE9 localStorage不支持本地文件,需要將項(xiàng)目署到服務(wù)器,才可以支持!
目前所有主流的瀏覽器都在一定程度上支持 HTML5 的 Web Storage特性。 由上圖可以看出,基本上所有現(xiàn)代瀏覽器都已經(jīng)支持 Web Storage。
Android平臺(tái)和 IOS 平臺(tái)各自的瀏覽器都基本上支持 Web Storage 本地存儲(chǔ)特性。 目前市場上的移動(dòng)設(shè)備, 除了 android 手機(jī)和 iphone 手機(jī)外,越來越多的平板電腦面世,而且基本上依賴著兩種平臺(tái)。在移動(dòng)端使用 Web Storage 我們幾乎不需要考慮瀏覽器是否支持, 當(dāng)然從代碼的嚴(yán)謹(jǐn)來說,建議最好在使用前先檢查瀏覽器是否支持
下面是檢測方式:
if (window.localStorage) { // 瀏覽器支持 localStorage }else{ // 不支持 } if (window.sessionStorage) { // 瀏覽器支持 sessionStorage }else{ // 不支持 }
三、localStorage
HTML5 的本地存儲(chǔ) API 中的 localStorage 與 sessionStorage 在使用方法上是相同的,區(qū)別在于 sessionStorage 在關(guān)閉頁面后即被清空,而 localStorage 則會(huì)一直保存。我們這里以 localStorage 為例,簡要介紹下 html5 的本地存儲(chǔ),并針對(duì)如遍歷等常見問題作一些示例說明。 localStorage 是 Html5 本地存儲(chǔ)的 API,使用鍵值對(duì)的方式進(jìn)行存取數(shù)據(jù),存取的數(shù)據(jù)只能是字符串。不同瀏覽器對(duì)該 API 支持情況有所差異,如使用方法、最大存儲(chǔ)空間等?!?/p>
存儲(chǔ)方式:以鍵值對(duì)(Key-Value)的方式存儲(chǔ)字符串。
主要應(yīng)用:購物車、客戶登錄、游戲存檔。。。
可儲(chǔ)存的數(shù)據(jù)類型:數(shù)組,圖片,json,樣式,腳本。。。(只要是能序列化成字符串的內(nèi)容都可以存儲(chǔ))
儲(chǔ)存地址:C:\Users\15014\AppData\Local\Google\Chrome\User Data\Default\Local Storage(不同電腦不一樣,需要打開隱藏文件顯示,但是在C盤搜索localStorage就能搜出這個(gè)文件夾。)
localStorage提供了四個(gè)方法來輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作。
(1)localStorage.setItem(鍵名,鍵值)在本地客戶端存儲(chǔ)一個(gè)字符串類型的數(shù)據(jù),其中,第一個(gè)參數(shù)“鍵名”代表了該數(shù)據(jù)的標(biāo)識(shí)符,而第二個(gè)參數(shù)“鍵值”為該數(shù)據(jù)本身。如:
localStorage.setItem("name", "張三"); //存儲(chǔ)鍵名為name和鍵值為"張三"的數(shù)據(jù)到本地 localStorage.setItem("age", "28"); //存儲(chǔ)鍵名為age和鍵值為"28"的數(shù)據(jù)到本地
(2)localStorage.getItem(鍵名) 讀取已存儲(chǔ)在本地的數(shù)據(jù),通過鍵名作為參數(shù)讀取出對(duì)應(yīng)鍵名的數(shù)據(jù)。如:
var data = localStorage.getItem("name"); alert(data);//張三
(3)localStorage.removeItem(鍵名)移除已存儲(chǔ)在本地的數(shù)據(jù),通過鍵名作為參數(shù)刪除對(duì)應(yīng)鍵名的數(shù)據(jù)。如:
var data2 = localStorage.removeItem("name");//從本地存儲(chǔ)中移除鍵名為name的數(shù)據(jù) alert(data2); //undefined
(4)localStorage.clear() 移除本地存儲(chǔ)所有數(shù)據(jù)。如:
localStorage.clear() 移除本地存儲(chǔ)所有數(shù)據(jù)。如: localStorage.clear(); //保存著的"age/28"和"name/張三"的鍵/值對(duì)也被移除了,所有本地?cái)?shù)據(jù)拜拜
(5)另外,sessionStorage中的四個(gè)函數(shù)與以上localStorage類的函數(shù)用法基本一致,就不再詳解。
下面是一個(gè)小實(shí)例:
<script type="text/javascript"> localStorage.setItem("name", "張三"); localStorage.setItem("age", "28"); verify(); //驗(yàn)證本地存儲(chǔ) localStorage.removeItem("name"); verify(); //驗(yàn)證name是否存在 localStorage.clear(); verify(); //驗(yàn)證name和age是否存在 //自定義驗(yàn)證函數(shù),驗(yàn)證name和age的數(shù)據(jù)是否存在 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沒有給本地存儲(chǔ)設(shè)置過期策略,那么在處理數(shù)據(jù)的過期策略的時(shí)候可以編寫自己過期策略程序,如下:
<!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();//獲取當(dāng)前時(shí)間 localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉(zhuǎn)換成json字符串序列 /* 說明: JSON.parse用于從一個(gè)字符串中解析出json對(duì)象,如 var str = '{"name":"huangxiaojian","age":"23"}' 結(jié)果: JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: Object 注意:單引號(hào)寫在{}外,每個(gè)屬性名都必須用雙引號(hào),否則會(huì)拋出異常。 JSON.stringify()用于從一個(gè)對(duì)象解析出字符串,如 var a = {a:1,b:2} 結(jié)果: JSON.stringify(a) "{"a":1,"b":2}" */ } function get(key,exp)//exp是設(shè)置的過期時(shí)間 { var val = localStorage.getItem(key);//獲取存儲(chǔ)的元素 var dataobj = JSON.parse(val);//解析出json對(duì)象 if(new Date().getTime() - dataobj.time > exp)//如果當(dāng)前時(shí)間-減去存儲(chǔ)的元素在創(chuàng)建時(shí)候設(shè)置的時(shí)間 > 過期時(shí)間 { console.log("expires");//提示過期 } else{ console.log("val="+dataobj.val); } } </script>
使用操作如下圖所示:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“H5本地儲(chǔ)存Web Storage的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
分享名稱:H5本地儲(chǔ)存WebStorage的示例分析
本文網(wǎng)址:http://bm7419.com/article26/pcejcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、全網(wǎng)營銷推廣、建站公司、網(wǎng)站營銷、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)