关于html5:HTML5本地存储-localStorage操作使用详解

51次阅读

共计 2972 个字符,预计需要花费 8 分钟才能阅读完成。

1、html5 几种存储模式

   本地存储(localStorage && sessionStorage)

   离线缓存(application cache)

   indexedDB 和 webSQL

2、localStorage && sessionStorage

   过期工夫:localStorage 永恒存储,永不生效除非手动删除

sessionStorage 浏览器从新关上后就隐没了

   大小:每个域名是 5M

3、localStorage API 和 sessionStorage API 统一

   getItem // 取记录
   setIten// 设置记录
   removeItem// 移除记录
   key// 取 key 所对应的值
   clear// 革除记录

4、存储的内容

 数组,图片,json,款式,脚本。。。(只有是能序列化成字符串的内容都能够存储)

5、localStorage 实例


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';// 这里肯定要在服务器上运行,图片要是以后服务器的图片!12.  function set(key){13.  var img = document.createElement('img');// 创立图片元素   
14.  img.addEventListener('load',function(){// 绑定加载工夫   
15.  var imgcavens = document.createElement('canvas');   
16.  imgcontent = imgcavens.getContext('2d');   
17.  imgcavens.width = this.width;// 设置画布大小为图片自身的大小   
18.  imgcavens.height = this.height;   
19.  imgcontent.drawImage(this,0,0,this.width,this.height);   
20.  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{21.  localStorage.setItem(key,imgAsDataUrl);// 保留图片地址   
22.  }catch(e)   
23.  {24.  console.log("storageFaild:"+e);// 错误信息   
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 运行,运行例子如图:

咱们当初看下资源外面是如何存储的,如图:

此时无论如何刷新页面和从新关上浏览器,方才存储的图片都是存在的,除非手动删除!

6、locstorage 过期策略

因为 html5 没有给本地存储设置过期策略,那么在解决图片的过期策略的时候能够编写本人过期策略程序,如下:


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();// 获取以后工夫   
13.  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}” */}


1.  function get(key,exp)//exp 是设置的过期工夫   
2.  {3.  var val = localStorage.getItem(key);// 获取存储的元素   
4.  var dataobj = JSON.parse(val);// 解析出 json 对象   
5.  if(new Date().getTime() - dataobj.time > exp)// 如果以后工夫 - 减去存储的元素在创立时候设置的工夫 > 过期工夫   
6.  {7.  console.log("expires");// 提醒过期   
8.  }   
9.  else{10.  console.log("val="+dataobj.val);   
11.  }   
12.  }   
13.  </script>

正文完
 0