数据库存储html5样式,H5存储2--Html5的几种存储形式详述

存储形式：

一、本地存储(localstorage&sessionstorage)

二、离线存储(application cache)

三、indexedDB和Web SQL

详解：

一、本地存储：

--localstorage&sessionstorage

1.存储形式

--key,value

2.过期

--永久存储，永不失效，除非手动删除(sessionStorage关闭浏览器就没了)

3.大小

--官方给出的文档是，每个域名5M

使用方法

--localstorage API介绍

--getItem (取)

--setItem (记录)

--removeItem (移除)

--key  (参数是下标，拿某下标上的key值)

--clear (全部删除)

总：只要是可以转化成字符串的，都可以存储在localsrorage

二、离线存储

1.数组：需要序列化为字符串存入

2.json数据：parse.stringify成字符串可以存入

3.图片:Canvas的toDataURL(image/*)之后变成base64～～一堆编码字符串

4.脚本：ajax-response 拉回来

5.样式文件：同上

使用限制：

子域名之间不能共享存储数据，这是可以使用h5的postmessage来发送信息,超出存储大小之后如何存储(LRU，FIFO)

案例1：存储图片到localstorage

场景：图片基本不更改，在用户第二次访问的时候希望用户马上看到，就可以把图片存到localstorage里面，如果图片的base64(canvas生成)特别大的话，会比较费localstorage的资源。canvas有一个安全策略，如果图片和请求的域名不在同一个域下，会报一个安全的策略，这时候需要给图片服务器加一个Access-Control-Allow-Origin，从而保证图片可以跨域.

使用本地存储注意事项：

1.使用前要判断浏览器是否支持(在实际情况中，有一些移动端的浏览器，比如ios,如果打开了无痕模式，这个时候没法使用localstorage,还有一些浏览器，你可以访问到localsttorage的对象，但是存储的时候报错，所以网上很多给出判断浏览器是否支持用的是window.localstorage，这种方法其实不是不太健全的，建议大家在判断是否支持的时候可以先去set一次，然后把这个set异常捕获，如果捕获到异常的话，说明浏览器不支持。)

2.写数据的时候，需要异常处理，避免超出容量抛错(它本身只有5M存储空间，如果不去做这样的异常处理，超出容量会报异常)

3.避免把敏感信息存入localstorage

4.key的唯一性(如果重复set的话会把新的值覆盖到之前的)

使用场景：

1.利用本地数据，减少网络传输(脚本，样式文件本地化，这样下次访问的时候，更流畅)

2.弱网络环境下，高延迟，低宽带，尽量把数据本地化

varsrc='e.png'

functionset(key){

varimg=document.createElement('img')

//当图片加载完成的时候触发回调函数

img.addEventListener('load',function(){

varimgCanvas=document.createElement('canvas')

imgContext=imgCanvas.getContext('2d')

//确保canvas元素的大小和图片尺寸一致

imgCanvas.width=this.width

imgCanvas.height=this.height

//渲染图片到canvas中

imgContext.drawImage(this,0,0,this.width,this.height)

//用data url形式取出imgAsDataURL就是一个base64字符串

varimgAsDataURL=imgCanvas.toDataURL('image/png')

//保存到本地存储中，做一下错误处理，以免有的浏览器不支持

try{

localStorage.setItem(key,imgAsDataURL)

}

catch(e){

console.log('storage failed'+e)

}

},false)

img.src=src

}

functionget(key){//从本地缓存获取图片并且渲染

varsrcStr=localStorage.getItem(key)

varimgObj=document.createElement('img')

imgObj.src=srcStr

document.body.appendChild(imgObj)

}

set('imgdata')

get('imgdata')

三、indexedDB和Web SQL

indexedDB database：Web SQL微软已经不支持了，虽然indexedDB支持率比较弱 ，但是也得学习。。它是一种能在浏览器中持久地存储结构化数据的数据库，并且为web应用提供了丰富的查询能力

下面来详细学习一下indexedDB：

算了，好像用的比较少，时间紧迫，不学了。。。