html5 存储详解

一般的服务存储：

cache（缓存），从DB或者磁盘读取出来的数据，放到缓存中的话，可以减少DB或者缓存的读取量
磁盘文件，一般存放资源文件，比如图片或者视频
数据库，存在关系型，可以快速索引查询数据。
内存，频繁使用某数据的话，则存放在内存里，缓存也是存放在内存中的。

在HTML5 之前的存储方式

cookies，优点就是，方便使用，简单粗暴。缺点就是，每一次的http请求头上都会带着cookies，一个域名的cookies只有4K大小的储存容量，Domain污染，还会存在安全隐患。一般的项目，会把一些身份验证，购物车的功能放到cookies中。
UserData，存在跨平台的问题。因为不符合W3C的标准的，所以平台支持不够广泛。所以这个只有IE(5.0-9.0)支持，其表现形式为XML文件格式。
google Gears chrome12.0后放弃支持。

HTML5 常见的存储方式

本地存储（l ocalstorage 、 sessionstorage ）

存储形式：key value

localstorage 过期策略：没有过期时间，永久存储，永远不失效，除非手动删除。

sessionstorage 过期策略：重新打开页面，或者打开关闭浏览器。

存储大小：每个域名5M。

适用场景：（比如手机）弱网络，高延迟，低带宽，尽量把数据本地化。

localstorageAPI介绍，很简单：

-getItem 取localstorage的记录

-setItem 设localstorage的记录

-removeItem 移除localstorage的记录

-key 取某个位置的localstorage的记录

-clean 清除所有localstorage的记录

常用来存储的数据类型：数组，json数据，图片，脚本，样式文件，凡是能转换成字符串的都能存储。

使用需要注意的事项

使用前要判断浏览器是否支持（可以先set一次，然后异常捕获。）
写数据的时候，需要异常处理，避免容量抛出异常。
避免敏感信息存入loaclstorage。
保持key的唯一性。

使用localstorage 限制：

因为localstorage 没有过期限制，如果需要有存储更新策略的话，需要在业务层控制。
子域名之间不能共享存储数据，这个cookies做的比较好。
超出存储大小之后，需要业务去处理，可以使用LRU或者FIFO去淘汰一些旧的数据。
server端没办法取到localstorage，如果想获取，只能把localstorage的数据跟在请求发送到服务器了。

处理关系型数据（ WebSQL、IndexedDB ）

能在浏览器中持久的存储结构化数据的数据库，并且为web应用提供丰富的查询能力。

WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。

每个域名可以创建多个DB，每个DB可以创建多个表，每个表可以创建多个对象。

application cache（离线缓存）

可以让web应用在离线的情况下继续使用，通过manifest文件指明需要的缓存资源。

检测是否在线。navigator.onLine

非常适合手机开发。

含有manifest属性的当前请求页，是会被缓存的。

更新是全局更新的，没法单独更新某文件。

如果请求带有参数，则不同参数代表的是不同的资源。

使用场景：

单地址页面
对于实时性要求不高的业务
离线webapp

manifest文件结构 manifest.appcache

CACHE MANIFEST
#version n.n

CACHE:
#需要缓存的文件
/css/sample.css
/images/image.jpg

NETWORK:
#除开上面CACHE缓存的文件外，每次都重新拉取文件
*

FALLBACK:
#离线状况下代替文件
/ offline.html

在html中引入manifest文件

<html manifest="manifest.appcache"

在服务器的apche/conf文件中，mime.type文件总，添加 text/cache-manifest appcache

html5的存储优势

存储空间大
接口丰富
数据相对安全
省流量
关系型

猜你喜欢