HTML5存储-学习总结
H5存储形式:
- 本地存储( localStorage && sessionStorage)
- 离线缓存( application cache )
- IndexedDB 和 Web SQL
本地存储:
sessionStorage
5M,重新打开页面或者关闭浏览器就消失了,关闭tab栏消失
localStorage
- 每个域名5M,永久存储,永不失效,除非手动删除
- IE8以上支持
- localStorage API介绍(getItem 、setItem、removeItem、key、clear)
- 只要能转换成字符串的都能存在localStorage,数组、json数据、 图片;(利用canvas最终转换成字符串.使用在图片不经常更改的情况下,不过如果图片bash64比较大的话,会比较浪费资源)、脚本、样式文件
- 注意事项:
(1) 使用前要判断浏览器是否支持;( setItem,然后catch异常;网上有window.localStorage的方法,不好,有的浏览器可以写入,但无法读出 )
(2) 写数据时候,需要异常处理,避免超出容量抛错;(5M)
(3) 避免把敏感的信息存入localStorage
(4) key的唯一性;(再次存入,会覆盖) - localStorage使用限制
(1) 存储更新策略,过期控制(永不过期,常驻浏览器的记录,业务中实现过期的策略,需要自己加,通过当前时间-localstorage时间差与过期时间比较大小进行过期控制);
(2) 子域名之间不能共享存储数据;( cookie支持:可以通过把子域名的document.domain设置成主域名,各个子域名既可以共享数据。可以通过postMessage达到子域名共享localStorage数据的目的)。
(3) 超出存储大小之后如何存储( 用一些比较成熟的算法淘汰一些数据,如:LRU, FIFO );
(4) server端如何取到;( cookie在服务端是可以取到的;localStorage/sessionStorage是纯客户端存储,在服务端取不到,如果要取到, 跟到POST/GET请求相应的参数后面,以达到该目的; )
IndexedDB(以前叫做Web SQL)
定义:一种能在浏览器中持久存储结构化数据的数据库,并为web应用提供了丰富的查询能力。就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引
使用教程
manifest
- appcache更新注意事项:
修改资源文件,必须通过修改manifest文件来更新被缓存的文件列表。 - 优点:
完全离线;
资源被缓存,加载更快;
降低server负载。 - 缺点:
含有manifest属性的当前页一定会被缓存;
更新依赖manifest文件,更新后需要再次刷新;
更新是全局性的,无法单点更新;
对于链接的参数变化敏感,不同的参数视为不同的文件。 - 适用场景:
单地址的页面(无参数);
对实时性要求不高的业务;
离线webapp。
总结
H5存储
- 优势:
- 存储空间大
- 接口丰富
- 数据相对安全
- 关系型
- 省流量
- 劣势:
- 浏览器兼容;( localStorage 和 app cache 主流浏览器都兼容的不错 )
- 同源策略;( localStorage 不可以跨子域,manifest 所引用的文件必须在同一个域名下面 )
- 脚本控制;( 只能在浏览器端存放;服务器端想拿到数据,只能通过请求 )
- 更新策略; ( 不像cookie可以设置过期时间;比如localStorage永不过期,必须自己写一套更新机制 )