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

1、html5本地存储 localstorage操作使用详解1、html5几种存储形式 本地存储（localstorage && sessionstorage） 离线缓存（application cache） indexeddb 和 websql 2、localstorage && sessionstorage 过期时光：localstorage 永远存储，永不失效除非手动删除 sessionstorage 扫瞄器重新打开后就消逝了 大小：每个域名是5m 3、localstorage api和sessionstorage api全都

2、getitem /取记录 setiten/设置记录 removeitem/移除记录 key/取key所对应的值 clear/清除记录 4、存储的内容 数组，json，样式，脚本。（只要是能序列化成字符串的内容都可以存储） 5、localstorage实例javascript code复制内容到剪贴板 locstorage 存储 var src='images/1.png'/这里一定要在服务器上运行，要是当前服务器的！ function set(key) var img = document.createelement('img');/创建元素 img.addev

3、entlistener('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 =

4、 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.s

5、etitem(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

6、(imgobj);/在页面中添加元素 上述办法可以在火狐和chrome运行，运行例子 我们现在看下资源里面是如何存储的， 此时无论如何刷新页面和重新打开扫瞄器，刚才存储的都是存在的，除非手动删除！6、locstorage 过期策略因为html5没有给本地存储设置过期策略，那么在处理的过期策略的时候可以编写自己过期策略程序，如下：javascript code复制内容到剪贴板 locstorage 过期策略 function set(key,value) var curtime = new date().gettime();/猎取当前时光 localstorage.setitem(key,jso

7、n.stringify(val:value,time:curtime);/转换成json字符串序列 /* 解释： json.parse用于从一个字符串中解析出json对象,如 var str = '"name":"huangxiaojian","age":"23"' 结果： json.parse(str) object age: "23" name: "huangxiaojian&a

8、mp;quot; _proto_: object 注重：单引号写在外，每个属性名都必需用双引号，否则会抛出异样。 json.stringify()用于从一个对象解析出字符串，如 var a = a:1,b:2 结果： json.stringify(a) ""a":1,"b":2" */ javascript code复制内容到剪贴板 function get(key,exp)/exp是设置的过期时光 var val = localstorage.getitem(key);/猎取存储的元素 var dataobj = json.parse(val);/解析出json对象 if(new date().gettime() - dataobj.time > exp)/假如当前时光-减去存储的元素在创建