cookie 和 sessionstorage，localstorage 的区别

在客户端存储数据可以使用的技术：

  (1)Cookie技术:浏览器兼容性好，不能超过4KB,操作复杂

  (2)Flash存储:依赖于Flash播放器

  (3)H5 WebStorage:不能超过8MB,操作简单

  (4)IndexDB:可存储大量数据，还不是标准技术

Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言，cookies会由服务端发送给客户端，客户端存储下来，然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话，追踪用户信息等事情。

此外，客户端也用使用 cookies 存储数据。因而，cookies 常被用于存储一些通用的数据，如用户的首选项设置。

Cookies 的优点

• 能用于和服务端通信
• 当 cookie 快要自动过期时，我们可以重新设置而不是删除

Cookies 的缺点

• 增加了文档传输的负载
• 只能存储少量的数据
• 只能存储字符串
• 潜在的 安全问题
• 自从有 Web Storage API (Local and Session Storage)，cookies 就不再被推荐用于存储数据了

浏览器支持

所有主流浏览器均支持 Cookies.

sessionstorage，localstorage 在浏览器中存储当前用户专用的数据；例如： 访问历史;购物车;内容定制，样式定制...

Session:会话: 浏览器从打开某个网站的一个页面开始，中间可能打开很多个页面，直到关闭浏览器，整个过程称为"浏览器与WEB服务器的一次会话“

 WebStorage技术中，浏览器为用户提供两个对象

1、window.sessionStorage:类数组对象: 会话级数据存储

    在浏览器进程所分得内存中存储一次WEB会话的数据

    可供此次会话的页面共同使用，浏览器一旦关闭就消失.

    作用: 在同一个会话中所有页面之间共享数据

    示例: 登录用户名/登录用户编号

    sessionStorage[key]=val;                  //保存一个数据

    sessionStorage.setItem(key,val);           //保存一个数据

    var val = sessionStorage[key];             //读取一个数据

    var val = sessionStorage.getItem(key);    //读取一个数据

    sessionStorage.removeItem(key);     //删除一个数据

    sessionStorage.clear()              //清除数据

    sessionStorage.length;                //数据个数

    sessionStorage.key(i);                //获取第i个key

   *****客户端技术不要保存安全性比较高的数据*****

2、localStorage,本地存储对象(跨会话级存储)

     在浏览器能管理外存(磁盘)中存储用户数据，可供此次会话及后续会话的页面共同使用;即使浏览器关闭了也不会消失--永久存在.

    作用:用户样式风格(qq空间)

    localStorage[key]=val;                //保存一个数据

    localStorage.setItem(key,val);        //保存一个数据

    var val = localStorage[key];          //读取一个数据

    var val = localStorage.getItem(key);   //读取一个数据

    localStorage.removeItem(key);          //删除一个数据

    localStorage.clear()                   //清除数据

    localStorage.length;                  //数据个数

    localStorage.key(i);                  //获取第i个key

   localStorage中若数据发生了修改,会触发事件 window.onstorage事件,可以监听事件，实现监视localStorage数据改变目的.

----不能监视sessionStorage数据修改.