html5本地存儲（localStorage）使用介紹

時間 2019-11-08

標籤 html5 html 本地存儲 localstorage 使用介紹欄目 HTML5 简体版

原文原文鏈接

一、html5幾種存儲形式
   本地存儲（localStorage && sessionStorage）
   離線緩存（application cache）
   indexedDB 和 webSQL
二、localStorage && sessionStorage
   過時時間：localStorage 永久存儲，永不失效除非手動刪除
                 sessionStorage 瀏覽器從新打開後就消失了
   大小：每一個域名是5M
三、localStorage API和sessionStorage API一致
   getItem //取記錄
   setIten//設置記錄
   removeItem//移除記錄
   key//取key所對應的值
   clear//清除記錄
四、存儲的內容
   數組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內容均可以存儲）
五、localStorage實例html

<!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>
   var src='images/1.png';//這裏必定要在服務器上運行，圖片要是當前服務器的圖片！
   function set(key){
   var img = document.createElement('img');//建立圖片元素
   img.addEventListener('load',function(){//綁定加載時間
   var imgcavens = document.createElement('canvas');
   imgcontent = imgcavens.getContext('2d');
   imgcavens.width = this.width;//設置畫布大小爲圖片自己的大小
   imgcavens.height = this.height;
   imgcontent.drawImage(this,0,0,this.width,this.height);
   var imgAsDataUrl = imgcavens.toDataURL('image/png');//這個方法必定要在服務器上運行
/*
對圖像數據作出修改之後，可使用toDataURL方法，將Canvas數據從新轉化成通常的圖像文件形式。
function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
}
上面的代碼將Canvas數據，轉化成PNG data URI。
*/
  try{
     localStorage.setItem(key,imgAsDataUrl);//保存圖片地址
   }catch(e)
   {
    console.log("storageFaild: "+e);//錯誤信息
   }
   },false)
   img.src = src;//指定須要存儲的圖片地址
   }
   function get(key){
    var srcStr = localStorage.getItem(key);//獲取本地存儲的元素
    var imgobj = document.createElement('img');
    imgobj.src = srcStr;//指定圖片路徑
    document.body.appendChild(imgobj);//在頁面中添加元素
   }
   </script>

上述方法能夠在火狐和chrome運行，運行例子如圖：html5

咱們如今看下資源裏面是如何存儲的，如圖：web

此時不管如何刷新頁面和從新打開瀏覽器，剛纔存儲的圖片都是存在的，除非手動刪除！chrome

六、locstorage 過時策略json

因爲html5沒有給本地存儲設置過時策略，那麼在處理圖片的過時策略的時候能夠編寫本身過時策略程序，以下：canvas

<!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>