返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

html5本地存储 localStorage操作使用详解

2019-01-28 14:17:28王冬梅

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实例

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE>    <head>   
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta http-equiv="Access-Control-Allow-Origin" content="anonymous">   
  3. <title>locstorage 图片存储</title>    </head>   
  4. <body>    </body>   
  5. </html>    <script>   
  6.    var src='images/1.png';//这里一定要在服务器上运行，图片要是当前服务器的图片！       function set(key){   
  7.    var img = document.createElement('img');//创建图片元素       img.addEventListener('load',function(){//绑定加载时间   
  8.    var imgcavens = document.createElement('canvas');       imgcontent = imgcavens.getContext('2d');   
  9.    imgcavens.width = this.width;//设置画布大小为图片本身的大小       imgcavens.height = this.height;   
  10.    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{   
  11.      localStorage.setItem(key,imgAsDataUrl);//保存图片地址       }catch(e)   
  12.    {        console.log("storageFaild: "+e);//错误信息   
  13.    }       },false)   
  14.    img.src = src;//指定需要存储的图片地址       }   
  15.    function get(key){        var srcStr = localStorage.getItem(key);//获取本地存储的元素   
  16.     var imgobj = document.createElement('img');        imgobj.src = srcStr;//指定图片路径   
  17.     document.body.appendChild(imgobj);//在页面中添加元素       }   
  18.    </script>   
相关文章 大家在看