以下为个人认为有必要记录的笔记 不喜勿喷
先说cookies
- http请求头上会带着。
- 大小受url长度限制最大为 4KB。
- 主 Domain 域名污染。
HTML5 几种存储方式
优点:
- 存储空间大。
- 接口丰富。
- 数据相对安全。
- 关系型。
- 省流量。
缺点:
- 浏览器兼容。
- 同源限制,不可跨域。
- 浏览器存放,要操作需用脚本控制。
- 更新策略,需要手动写业务。
本地存储
存储形式:key->value
过期:永不过期,除非手动删除。
大小:官方文档说每个域名5MB。
存储内容:图片,数组,json数据,脚本,样式文件。
localStorage
getItem(key, value)
setItem(key)
removeItem(key)
key(number)
clear()
使用注意事项:
- 使用前判断浏览器是否支持。
- 写数据时要进行异常处理,避免超出容量抛错。
- 避免把敏感信息存入 localStorage。
- key 的唯一性。
使用限制:
- 无过期时间限制,需手动添加。
- 子域名之间不能共享存储数据。
- 超出存储大小之后需要手动写业务算法清除旧纪录。
- 不做处理的情况下,server端是获取不到数据的。
使用场景
- 利用本地数据,减少网络传输。
- 若网络环境下,高延迟,低带宽,尽量把数据本地化。
sessionStorage
和 localStorage 原理差不多,就是sessionStorage只在当前网页,关闭当前网页或重新开启当前网页 sessionStorage失效。
离线缓存 application cache(废弃)
让 web应用在离线的情况下继续使用,通过 manifest 文件指明需要缓存的资源。
检测是否在线:navigator.onLine
使用:创建 manifest文件。
如何更新:如果有资源被修改,必须通过修改 manifest文件来刷新被缓存的文件列表。
优势:
- 完全离线。
- 资源被缓存,加载更快。
- 降低 server 负载压力。
使用缺点:
- 含有当前 manifest属性的当前请求页无论如何都会被缓存。
- 更新需要通过 manifest文件并刷新需要更新的页面(需要两次刷新才能获取更新资源)。
- 更新是全局性的,无法进行单点更新。
- 对于链接的参数变化很敏感,url上任何一个参数的修改都会被重新缓存。
使用场景:
- 单地址页面。
- 对实时性要求不高的业务。
- 离线 webapp。
IndexedDB 和 Web SQL
一种能够在浏览器中持久存储结构化数据的数据库,并且为 web应用提供了丰富的查询能力。
按域名分配独立空间,一个独立域名下可以创建多个数据库,每个数据库可以创建多个对象存储空间(表),一个对象存储空间可以存储多个对象数据。
增删改查、事务、游标、索引。
并没有很详细地插入代码记录,关键部分都是一笔带过了,仅作个人学习记录啦。