1、html5几种存储形式

本地存储(本地存储会话存储)

离线缓存(应用程序缓存)

IndexedDB和webSQL

2、localStorage sessionStorage

过期时间：本地存储是存储，除非手动删除，否则永远不会过期

会话存储浏览器在重新打开后消失

规模：每个域名5M

3、localStorage API和sessionStorage API一致

GetItem //获取记录

SetIten//设置记录

移除项目//移除记录

Key//取与Key对应的值

清除//清除记录

4、存储的内容

数组，图片，json，样式，脚本。(任何可以序列化为字符串的东西都可以存储。)

5、localStorage实例

JavaScript代码将内容复制到剪贴板

！文档类型

头

meta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8'/

meta http-equiv=' Access-Control-Allow-Origin '内容='anonymous '

标题存储图片存储/标题

/head

身体

/body

/html

脚本

var src=' images/1 . png '；//必须在服务器上运行，图片应该是当前服务器的图片！

functionset(key){

variamg=document . CreateElement(' img ')；//创建图片元素

Img。addeventlistener ('load '，function () {//bind load time

varimgcavens=document . CreateElement(' canvas ')；

imgcontent=imgcavens . GetContext(' 2d ')；

imgcavens . width=this . width；//将画布大小设置为图片本身的大小

imgcavens . height=this . height；

imgcontent.drawImage(this，0，0，this.width，this . height)；

varmgasdataurl=imgcavens . TotaToul(' image/png ')；//此方法必须在服务器上运行。/*修改完图像数据后，可以使用toDataURL方法将Canvas数据重新转换成通用的图像文件形式。functionconvertCanvasToImage(canvas){ varimage=new image()；image . src=canvas . TotaToul(' image/png ')；returnimage}以上代码将Canvas数据转换为PNGdataURI。*/try{

localStorage.setItem(key，IMgasdataURl)；//保存图片地址

}catch(e)

{

console . log(' StorageField : ' e)；//错误消息

}

}，false)

img.src=src//指定要存储的图片的地址

}

functionget(key){

varsrcStr=local storage . GetItem(key)；//获取本地存储的元素

varimg obj=document . CreateElement(' img ')；

imgobj.src=srcStr//指定图片路径

document . body . appendchild(imgobj)；//向页面添加元素

}

/script

以上方法可以在Firefox和chrome中运行，运行示例如下：

现在让我们看看资源是如何存储的，如图所示：

这时候不管怎么刷新页面，重新打开浏览器，刚才保存的图片都会存在，除非你手动删除！

6、locstorage 过期策略

由于html5没有为本地存储设置过期策略，您可以在处理图片的过期策略时编写自己的过期策略程序，如下所示：

JavaScript代码将内容复制到剪贴板

！文档类型

头

meta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8'/

meta http-equiv=' Access-Control-Allow-Origin '内容='anonymous '

标题存储到期政策/标题

/head

身体

/body

/html

脚本

函数集(键，值){

varcurtime=newDate()。getTime()；//获取当前时间

localStorage.setItem(key，JSON.stringify({val:value，time : curtime })；//转换为json字符串序列/*说明：json.parse用于从一个字符串中解析json对象，如varstr=' { ' name ' : ' huangxiaojian '，' age' :' 23'} '结果：JSON.parse (str)对象age:' 23 '

注意：单引号写在{}外，每个属性名必须使用双引号，否则会抛出异常。JSON.stringfy()用于从对象解析字符串，如var a={a:1，B :2 } } Result:JSON . stringfy(A)' { ' A ' :1，' B' 33602}' */}

JavaScript代码将内容复制到剪贴板

functionget(key，exp)//exp是设置的到期时间

{

varval=localStorage.getItem(键)；//获取存储的元素

vardata obj=JSON . parse(val)；//解析json对象

If (newdate()。gettime ()-dataobj。timeexp)//如果当前时间减去创建存储元素时的过期时间，

{

console.log('过期')；//提示过期

}

else{

console . log(' val=' data obj . val)；

}

}

/script