1、本地存储(localstorage && sessionstorage)
2、离线缓存(application cache)
3、IndexedD 和 Web Sql
由于我是初学者,离线缓存和IndexedD 和 Web Sql我看了视频也不是很清楚,对这两张种比较感兴趣的可以上慕课网---html5存储课程看。
链接:点击打开链接
本地存储:
API
--localstorage与sessionstorage
存储形式
--key--》value
过期
1)localstorage:永久存储,永不失效,除非手动删除
2)sessionstorage:会话结束就失效
大小
--官方给出的文档是,每个域名5M
浏览器支持情况:(这是比较老的)
使用方法
--getItem
--setItem
--removeItem
--key
--clear
使用注意事项:
1)使用前要判断浏览器是否支持
2)写数据时候,需要异常处理,避免超出容量抛错
3)避免吧敏感的信息存入localstorage
4)key的唯一性
使用限制:
1)存储更新策略,过期控制
我们可以通过业务逻辑代码进行控制,代码示例如下:
function set(key, v) {
var curTime = new Date().getTime();
localStorage.setItem(key, JSON.stringify({ data: v, time: curTime }));
}
//exp为过期天数
function get(key, exp) {
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time > exp) {
console.log('expires');
} else {
console.log("data=" + dataObj.data);
}
}
2)子域名之间不能共享存储数据
3)超出存储大小之后如何存储(LRU,FIFO)
这个我还去实现,有实现的大神,求示例。。。
4)server端如何取到
与cookie不一样,localStorage没有与http请求头一起传递到服务端,所以我们想要获取localStorage只能是url带参数传递过去。
使用场景
1)利用本地数据,减少网络传输
2)弱网络环境下,高延迟,低带宽,尽量把数据本地化
今天就这样子啦。。有错误和改进的地方,请告诉我,谢谢。