localStorage 和 sessionStorage 介绍

h5 web存储

使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage 介绍

客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）；
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

注意事项：

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

例如浏览网页运用sessionStorage的思路：
再理一下实现思路，①页面滚动，将滚动位置存到session中 → ②再次进到页面中，到session中取出上次保存的浏览位置 → ③滚动到对应位置

两个存储的用法

存储值：
setItem存储value
　　用途：将value存储到key字段
　　用法：.setItem( key, value)
　　代码示例：

 sessionStorage.setItem("key", "value");    localStorage.setItem("site", "js8.in");

获取值：
getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：

var value = sessionStorage.getItem(“key”);
var site =localStorage.getItem(“site”);

Localstotage删除值

localStorage.removeItem(“key”);//删除名称为“key”的信息。
localStorage.clear();​//清空localStorage中所有信息

枚举localStorage的方法：

for(var i=0;i<localStorage.length;i++){
     var name = localStorage.key(i)​;
     var value = localStorage.getItem(name);​
}

实例：（存储浏览网页的位置）

//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
　　　sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
} 
});

//onload时，取出并滚动到上次保存位置

window.onload = function()
{
　　var _offset = sessionStorage.getItem("offsetTop");
　　$(document).scrollTop(offsetTop);
};