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