localStorage使用,html5本地存储方式
1、html5几种存储形式
本地存储会话存储
离线缓存(应用程序缓存)
IndexedDB和webSQL
2、localStorage sessionStorage
过期时间：localStorage永久存储，除非手动删除，否则永远不会过期。
会话存储浏览器在重新打开时消失。
大小：每个域名5M。
3、localStorage API和sessionStorage API一致
GetItem //获取记录
SetIten//创纪录
RemoveItem//删除记录
Key//取Key对应的值
清除//清除记录
4、存储的内容
数组，图片，json，样式，脚本。(任何可以序列化为字符串的内容都可以存储)
5、localStorage实例
将JavaScript代码内容编码到剪贴板！DOCTYPE head meta http-equiv= Content-Type Content= text/html；charset=UTF-8 /meta http-equiv= access-control-allow-origin content= anonymous title loc storage图像存储/title/head body/body/htmlscriptvarsrc= images/1 . png ；//在这里，必须在服务器上运行。图片是当前服务器的图片！functionset(key){ varimg=document . createelement( img )；//创建一个图片元素img.addeventlistener (load ，function(){//绑定加载时间varimgcavens=document . createelement( canvas )；img content=img cavens . get context( 2d )；img cavens . width=this . width；//将画布大小设置为图片本身的大小。img cavens . height=this . height；imgcontent.drawImage(this，0，0，this.width，this . height)；varimgAsDataUrl=img cavens . toda taurl( image/png )；//此方法必须在服务器上运行。/*修改完图像数据后，可以使用toDataURL方法将画布数据再次转换成通用的图像文件形式。functionconvertCanvasToImage(canvas){ varimage=new image()；image . src=canvas . toda taurl( image/png )；returnimage}上面的代码将画布数据转换成PNGdataURI。*/try{ localStorage.setItem(key，imgAsDataUrl)；//保存图片地址} catch(e){ console . log( storage failed: e)；//错误消息} }，false)img . src=src；//指定要存储图片的地址} function get(key){ varsrcstr=local storage . getitem(key)；//获取本地存储的元素varimgobj=document . createelement( img )；imgobj.src=srcStr//指定图像路径document . body . appendchild(imgobj)；//向页面添加元素} /script上述方法可以在Firefox和chrome中运行。运行示例如图所示：
现在让我们看看资源是如何存储的，如图所示：
此时，无论如何刷新页面，重新打开浏览器，刚刚保存的图片还是会存在的，除非手动删除！
6、locstorage 过期策略
因为html5没有为本地存储设置过期策略，所以在处理图片的过期策略时，可以编写自己的过期策略程序，如下所示：
将JavaScript代码内容编码到剪贴板！DOCTYPE head meta http-equiv= Content-Type Content= text/html；charset=UTF-8 /meta http-equiv= access-control-allow-origin content= anonymous title loc storage过期策略/title/head body/body/htmlscriptfunctionset(key，value) {varcurtime=newdate()。GetTime()；//获取当前时间localstorage.setItem (key，json.stringify ({val: value，time:curtime })；//转换为json字符串序列/*说明：json.parse用于从字符串解析json对象，如varstr= {name :黄， age: 23} 结果：json.parse (str)对象Age: 23 name:黄。JSON.stringify()用于解析来自对象的字符串，比如var a={a:1，b:2 } Result:JSON . stringify(a) { a :1， b: 2} */}
代码将内容复制到剪贴板functionget(key，exp)//exp是设置的过期时间{ var val=local storage . getitem(key)；//获取存储元素vardata obj=JSON . parse(val)；//解析json对象if (newdate()。gettime()-data obj . time exp)//如果当前时间-减去存储元素在创建时设置的时间过期时间{ console . log( expires )；//提示过期} else { console . log( val= data obj . val)；} }/脚本操作如下图所示：
看看本地存储的结果。
以上简单的例子可以操作html5的本地存储功能，感觉html5在本地存储方面非常方便！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。