欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5本地存儲(chǔ) localStorage操作使用詳解

  發(fā)布時(shí)間：2016-09-20 09:41:07   作者：佚名   我要評(píng)論
這篇文章主要介紹了html5本地存儲(chǔ) localStorage操作使用詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

1、html5幾種存儲(chǔ)形式

   本地存儲(chǔ)（localStorage && sessionStorage）

   離線緩存（application cache）

   indexedDB 和 webSQL

2、localStorage && sessionStorage

   過期時(shí)間：localStorage 永久存儲(chǔ)，永不失效除非手動(dòng)刪除

                 sessionStorage 瀏覽器重新打開后就消失了

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

3、localStorage API和sessionStorage API一致

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

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

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

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 圖片存儲(chǔ)</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)行/*對(duì)圖像數(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;//指定需要存儲(chǔ)的圖片地址   
  28.    }   
  29.    function get(key){   
  30.     var srcStr = localStorage.getItem(key);//獲取本地存儲(chǔ)的元素   
  31.     var imgobj = document.createElement('img');   
  32.     imgobj.src = srcStr;//指定圖片路徑   
  33.     document.body.appendChild(imgobj);//在頁面中添加元素   
  34.    }   
  35.    </script>   

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


 
我們現(xiàn)在看下資源里面是如何存儲(chǔ)的，如圖：
 


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

6、locstorage 過期策略

由于html5沒有給本地存儲(chǔ)設(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對(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}" */}

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

使用操作如下圖所示：

看下本地存儲(chǔ)的結(jié)果

上述簡單的例子可以操作html5本地存儲(chǔ)的功能，感覺html5在本地存儲(chǔ)方面還是很方便的！

相關(guān)文章

  • HTML5離線應(yīng)用與客戶端存儲(chǔ)的實(shí)現(xiàn)

    這篇文章主要介紹了HTML5離線應(yīng)用與客戶端存儲(chǔ)的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-03

  • HTML5本地存儲(chǔ)和本地?cái)?shù)據(jù)庫實(shí)例詳解

    這篇文章主要介紹了HTML5本地存儲(chǔ)和本地?cái)?shù)據(jù)庫實(shí)例詳解,需要的朋友可以參考下
    2017-09-05

  • 詳解前端HTML5幾種存儲(chǔ)方式的總結(jié)

    本篇文章主要介紹了前端HTML5幾種存儲(chǔ)方式的總結(jié) ，主要包括本地存儲(chǔ)localstorage，本地存儲(chǔ)sessionstorage，離線緩存（application cache），Web SQL，IndexedDB。有興趣
    2016-12-27

  • HTML5 Web 存儲(chǔ)詳解

    下面小編就為大家?guī)硪黄狧TML5 Web 存儲(chǔ)詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
    2016-09-16

  • HTML5中的網(wǎng)絡(luò)存儲(chǔ)實(shí)現(xiàn)方式

    傳統(tǒng)方式使用document.cookie來進(jìn)行存儲(chǔ)，但是由于其存儲(chǔ)的空間只有4KB左右，并且需要復(fù)雜的操作進(jìn)行解析，給發(fā)開者帶來很多不便，為此，HTML5規(guī)范提出了網(wǎng)絡(luò)存儲(chǔ)的解決方
    2020-04-28

最新評(píng)論