cookie、localStorage和sessionStorage详解

一、cookie

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件,但只能储存4kb的数据;目的是用于辨别用户身份，记录跟踪购物车的商品信息（如数量）、记录用户访问次数等。

cookie的作用范围。一般cookie储存在内存里，若设置了过期时间则储存在硬盘里，浏览器页面关闭也不会失效，直到设置的过期时间后才失效。若不设置cookie的过期时间，则有效期为浏览器窗口的会话期间，关闭浏览器窗口就失效。

cookie如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。

定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

cookie.setmaxage设置为0时，会马上在浏览器上删除指定的cookie

cookie.setmaxage设置为-1时，代表关闭当前浏览器即失效。

单个cookie的大小限制一般是4K 注意是针对单个cookie

如果设置了过期时间，浏览器就会把cookie保存到硬盘上

setCookie(name,value,expiredays){//设置时间为天为过期单位
      var exdate=new Date();
      exdate.setDate(exdate.getDate()+expiredays);
      document.cookie=name + '=' + escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    },

获取cookie

      var start = document.cookie.indexOf(name+'=')
      var end = document.cookie.indexOf(';',start)
      if(end=-1){
        end = document.cookie.length
      }
      return unescape(document.cookie.substring(start,end))
    }

二、Web storage

web Storeage的概念和cookie很相似，区别在于web Storage更够储存各多的数据，cookie的大小是受限的，并且每次请求一个新的页面的时候都会被发送过去，无形中浪费了带宽，另外cookie还需要指定作用域，不可跨越调用。
HTML5增加了两个储存方式：localStorage和sessionStorage

1、localStorage

localStorage的生命周期是永久，除非手动去清除，否则永远都存在，他的储存大小是5MB，仅在客户端浏览器上储存，不参与服务器的通信。

每一个域名下的localStorage容量一般是5M 注意这个5M是针对一个域名的

localStorage的使用方法

      //设置localStorage保存到本地，第一个为变量名，第二个是值
      localStorage.setItem('Author', 'Jane')
      // 获取数据
      localStorage.getItem('Author')
      // 删除保存的数据
      localStorage.removeItem('Author')
      // 清除所有保存的数据
      localStorage.clear()

通常以键值对的方式储存，通常储存为字符串

2、sessionStorage的使用

sessionStorage顾名思义，是在当前会话下有效，引入了一个“浏览器窗口的概念”,sessionStorage是在同源的同窗口中，始终存在的数据，只要浏览器不关闭，即使是刷新或者进入同源的另一个页面，数据仍在。同时打开“独立”的窗口，即使是同一个页面，sessionStorage的对象也是不同的。关闭窗口后sessionStorage就会被销毁。

sessionStorage的存储数据大小一般都是：5MB 不知道是针对所有的还是一个会话窗口

sessionStorage的使用方法

      // 设置sessionStorage保存到本地，第一个为变量名，第二个是值
      sessionStorage.setItem('sessionName', 'John')
      // 获取数据
      sessionStorage.getItem('sessionName')
      // 删除保存的数据
      sessionStorage.removeItem('sessionName')
      // 清除所有保存的数据
      sessionStorage.clear()

比如设置sessionStorage的sessionName为John

点击按钮change方法触发，将sessionName改为dell，

 change () {
      sessionStorage.setItem('sessionName', 'dell')
      this.sessionName = sessionStorage.getItem('sessionName')
    }

再打开独立的窗口，会发现sessionStorage的数值仍是初始值，说明不同窗口的sessionStorege的对象是不同的，而localStorage的值是同步改变的。

3、复杂数据类型储存

因为上面说过，webStorage是以字符串的格式储存的，所以不能直接储存对象和数组类型，需要先转换一下格式再进行储存。

使用JSON.stringify()将对象转换成字符串

解析的时候，再使用JSON.parse()转换回去使用。

4.Web Storage带来的好处

1、减少网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数
据在浏览器和服务器间不必要的来回传递
2、快速显示数据：性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网
页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示
3、临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便

三、sessionStorage、localStorage和cookie的区别

共同点：都是保存在浏览器端、且同源的，cookie和localStorage受同源策略限制。跨域请求默认不带cookie等凭证。

区别：

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便

7、cookie、localStorage和sessionStorage都保存在客户端。

8、浏览器发送请求的时候，cookie会自动携带在请求头里面，localStorage和sessionStorage不与服务器进行交互通信。

四 Local Storage的注意点

localStorage本质上是对字符串的存取，有json格式时需要JSON.stringify()转化为字符串。
localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。
sessionStorage api与localStorage相同。sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
localStorage作用域是协议、主机名、端口。
sessionStorage作用域是窗口、协议、主机名、端口。

五同源的补充说明

什么是同源的呢，它将由 URL 决定，他的协议（http, https），端口号（80,8080），主机名（baidu.com, http://sina.com) 都要一致才能视为同源

与 http://store.company.com/dir/page.html 相比

Tips：IE 浏览器的同源策略是不考虑端口的

92IT

Just love IT.

cookie、localStorage和sessionStorage详解