localstorage 和 sessionstorage 本地存储

在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度.

那么 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);
　　}