您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁設(shè)計(jì)教程 >> 移動前端 >> 瀏覽設(shè)計(jì)教程

html5本地存儲 localStorage操作使用詳解

2016/12/30 9:40:19來源：互聯(lián)網(wǎng)

1、html5幾種存儲情勢

   本地存儲（localStorage && sessionStorage）

   離線緩存（application cache）

   indexedDB 和 webSQL

2、localStorage && sessionStorage

   過期時(shí)間：localStorage 永世存儲，永不失效除非手動刪除

                 sessionStorage 欣賞重視新打開后就消散了

   大?。好總€(gè)域名是5M

3、localStorage API和sessionStorage API同等

   getItem //取記錄
   setIten//設(shè)置記錄
   removeItem//移除記錄
   key//取key所對應(yīng)的值
   clear//消滅記錄

4、存儲的內(nèi)容

   數(shù)組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內(nèi)容都可以存儲）

5、localStorage實(shí)例

javascript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous">   
  5. <title>locstorage 圖片存儲</title>   
  6. </head>   
  7. <body>   
  8. </body>   
  9. </html>   
  10. <script>   
  11.    var src='images/1.png';//這里肯定要在服務(wù)器上運(yùn)行，圖片要是當(dāng)前服務(wù)器的圖片！   
  12.    function set(key){   
  13.    var img = document.createElement('img');//創(chuàng)建圖片元素   
  14.    img.addEventListener('load',function(){//綁定加載時(shí)間   
  15.    var imgcavens = document.createElement('canvas');   
  16.    imgcontent = imgcavens.getContext('2d');   
  17.    imgcavens.width = this.width;//設(shè)置畫布大小為圖片自己的大小   
  18.    imgcavens.height = this.height;   
  19.    imgcontent.drawImage(this,0,0,this.width,this.height);   
  20.    var imgAsDataUrl = imgcavens.toDataURL('image/png');//這個(gè)方法肯定要在服務(wù)器上運(yùn)行/*對圖像數(shù)據(jù)做出修改以后，可以使用toDataURL方法，將Canvas數(shù)據(jù)重新轉(zhuǎn)化成一樣平常的圖像文件情勢。function convertCanvasToImage(canvas) {  var image = new Image();  image.src = canvas.toDataURL("image/png");  return image;}上面的代碼將Canvas數(shù)據(jù)，轉(zhuǎn)化成PNG data URI。*/  try{   
  21.      localStorage.setItem(key,imgAsDataUrl);//保存圖片地址   
  22.    }catch(e)   
  23.    {   
  24.     console.log("storageFaild: "+e);//錯(cuò)誤信息   
  25.    }   
  26.    },false)   
  27.    img.src = src;//指定必要存儲的圖片地址   
  28.    }   
  29.    function get(key){   
  30.     var srcStr = localStorage.getItem(key);//獲取本地存儲的元素   
  31.     var imgobj = document.createElement('img');   
  32.     imgobj.src = srcStr;//指定圖片路徑   
  33.     document.body.appendChild(imgobj);//在頁面中添加元素   
  34.    }   
  35.    </script>   

上述方法可以在火狐和chrome運(yùn)行，運(yùn)行例子如圖：


 
我們?nèi)缃窨聪沦Y源里面是如何存儲的，如圖：
 


此時(shí)無論如何刷新頁面和重新打開欣賞器，剛才存儲的圖片都是存在的，除非手動刪除！

6、locstorage 過期策略

因?yàn)閔tml5沒有給本地存儲設(shè)置過期策略，那么在處理圖片的過期策略的時(shí)候可以編寫本身過期策略程序，如下：

javascript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous">   
  5. <title>locstorage 過期策略</title>   
  6. </head>   
  7. <body>   
  8. </body>   
  9. </html>   
  10. <script>   
  11. function set(key,value){   
  12.  var curtime = new Date().getTime();//獲取當(dāng)前時(shí)間   
  13.  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉(zhuǎn)換成json字符串序列 /*  說明：  JSON.parse用于從一個(gè)字符串中解析出json對象,如  var str = '{"name":"huangxiaojian","age":"23"}'  效果：  JSON.parse(str)  Object    age: "23"    name: "huangxiaojian"    __proto__: Object   

 細(xì)致：單引號寫在{}外，每個(gè)屬性名都必須用雙引號，否則會拋出非常。  JSON.stringify()用于從一個(gè)對象解析出字符串，如  var a = {a:1,b:2}  效果：  JSON.stringify(a)  "{"a":1,"b":2}" */}

javascript Code復(fù)制內(nèi)容到剪貼板
  1. function get(key,exp)//exp是設(shè)置的過期時(shí)間   
  2. {   
  3.   var val = localStorage.getItem(key);//獲取存儲的元素   
  4.   var dataobj = JSON.parse(val);//解析出json對象   
  5. if(new Date().getTime() - dataobj.time > exp)//假如當(dāng)前時(shí)間-減去存儲的元素在創(chuàng)建時(shí)候設(shè)置的時(shí)間 > 過期時(shí)間   
  6. {   
  7.   console.log("expires");//提醒過期   
  8. }   
  9. else{   
  10.   console.log("val="+dataobj.val);   
  11. }   
  12. }   
  13. </script>   

使用操作如下圖所示：

看下本地存儲的效果

上述簡單的例子可以操作html5本地存儲的功能，感覺html5在本地存儲方面照舊很方便的！

[教程作者：佚名]
關(guān)鍵詞：本地 存儲 操作 使用 詳解
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請勿用于商業(yè)用途！
本文地址：http://pkvc.cn/tutorial/wd3352.html
CSS3 畫基本圖形，圓形、橢圓形、三角形等
使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
圖趣網(wǎng)微信
建議反饋
×