loaclStorage 和 sessionStorage 区别

概述

loaclStorage 和 sessionStorage 一样都是用来存储客户端临时信息的对象。
存储的类型：字符串类型的对象（虽然规范可以存储原生类型的对象，但目前没有浏览器对其进行实现）

cookie、localStorage、sessionStorage的差异

生命周期：

cookie：可以设置失效时间，默认关闭浏览器后失效。
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小：

cookie： 4kb
localStorage 和 sessionStorage：可以保存 5MB 的信息

http请求：

cookie：每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题
localStorage 和 sessionStorage： 仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

cookie：需要程序员自己封装，源生的 cookie 接口不友好
localStorage 和 sessionStorage： 源生接口可以接受，亦可再次封装来对 Object 和 Array 有更好的支持

应用场景：

---

一般每次 http 请求都会携带 cookie 信息，而且 cookie 还需要指定作用域，不能跨越调用使用。识别用户登录一啊不能 cookie 比 storage 要好。
storage 在存储数据大小上面秒杀了 cookie。现在一般使用这个。
localStorage 可以用来页面传递参数。sessionStorage 用来保存一些临时的数据，防止用户刷新之后丢失了一些参数。

浏览器支持情况：

以下是浏览器的支持情况

数据存放处

sessionStorage

sessionStorage 是 HTML5 新增的一个会话存储对象， 用来临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据

使用

---

1. serItem 存储 value

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

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

2.getItem 获取 value

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

var value = sessionStorage.getItem("key");
var site = localStorage,getItem("site");

//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
    sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
    } 
});
//onload时，取出并滚动到上次保存位置
 
window.onload = function()
{
    var _offset = sessionStorage.getItem("offsetTop");
    $(document).scrollTop(offsetTop);
};

loaclStorage

使用方式上面做出了描述

localStorage和sessionStorage使用时使用相同的API：

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值

枚举localStorage的方法：

for(var i=0;i<localStorage.length;i++){

     var name = localStorage.key(i)​;

     var value = localStorage.getItem(name);​

}

删除localStorage中存储信息的方法：

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

通过getItem或直接使用localStorage[“key”]获取到的信息均为实际存储的副本。
例如：

localStorage.key = {value1:"value1"}​;

localStorage.key.value1='a'​;

这里是无法对实际存储的值产生作用的，下面的写法也不可以：

localStorage.getItem("key").value1="a";

同源的问题

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

同源的判断规则：

http://www.test.com
https://www.test.com （不同源，因为协议不同）
http://my.test.com（不同源，因为主机名不同）
http://www.test.com:8080（不同源，因为端口不同）