在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度.
那么 HTML5 存储的目标是什么?
1.解决存储 大小的问题
2.解决请求头带存储信息 的问题
3.解决关系存储的问题
4.跨浏览器
在HTML5没有出来之前,我们的存储一直大多都是使用cookies 存储 但是cookies 有明显的缺陷.
cookies的缺陷:
1.http请求头上回带着 会存在安全上的问题
2.只能储存4k大小的
3.主DOM污染
但是在HTML5 之后,出现了解决缓存问题的API.
一.localstorage 和 sessionstorage 本地存储
这种大家都比较熟悉 存储形式: key->value
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数 据也随之销毁 ,因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持
判断浏览器是否支持localstorage
if (window.localStorage) {
alert("浏览器支持localStorage");
}else {
alert("浏览器不支持localStorage");
}
过期时间: 永久存储,永不失效,除非手动删除
大小:每个域名 5M
可以存:数组 json 图片 脚本 样式文件
注意事项
<1.使用前要判断浏览器是否支持
<2.写数据时,需要异常处理,避免超出容量抛错
<3.避免把敏感的信息存入localstorage
<4.key 的唯一性
有四种方法 setItem,getItem,removeItem,clear
//setItem存储value 用法：.setItem( key, value)
localStorage.setItem('key','value');
localStorage.setItem('age','20'); // 存储年龄 为20
//getItem获取value 用法：.getItem(key)
var a = localStorage.getItem('age');
// removeItem() 删除key值
localStorage.setItem('name','coco');
var c= localStorage.removeItem('name');
console.log(c); // 打印出来是 undefined
// clear() 清楚所有的key/value
localStorage.clear();
也可以这样写,这两种 方式的结果是一样的
localStorage.name = 'coco';
localStorage['name'] = 'koko';
// localStorage的key和length属性实现遍历
var storage = window.localStorage;
for (var i = 0; i < storage.length; i++) {
var key = storage.key[i];
var value = storage.getItem(key);
console.log(key+'='+value);
}