cookies,sessionStorage和localStorage的区别

联系：

• sessionStorage和localStorage一样，都是用来缓存客户端缓存信息。
• 他们都只能存储字符串类型对象。

区别：

• localStorage的生命周期是永久的，除非用户主动清除浏览器UI上存储的localStorage信息，否则它将永久存在。
• sessionStorage的生命周期是存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据随着窗口或标签页的关闭而被清空。因此其仅仅是会话级别的本地存储。
• 不同的浏览器之间是无法共享sessionStorage和localStorage信息的，同一浏览器的不同页面之间可以共享localStorage信息（页面属于相同域名和端口），但不同页面或标签页之间无法共享sessionStorage的信息。注意：页面及标签页是指顶级窗口，如果一个标签页包含多个iframes标签，且它们属于同源页面，它们之间是可以共享sessionStorage信息的。

• 同源的判断规则：

  http://www.test.com

  https://www.test.com （不同源，因为协议不同）

  http://my.test.com（不同源，因为主机名不同）

  http://www.test.com:8080（不同源，因为端口不同）

• localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

  localStorage.setItem('key','value');//以key为名称存储一个value值
  localStorage.getItem('key');//得到名称为key的值
  
  //枚举localStorage的方法
  
  var storage=window.localStorage;
  for(var i=0;i<storage.length;i++){
    var name=storage.key(i);
    var value=storage.getItem(name);
  }
  
  //删除localStorage中存储信息的方法：
  localStorage.removeItem('key);//删除名称为“key”的信息。
  localStorage.clear();//清除所有方法

• 通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。

  例如：

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

  localStorage.key.value1='a'​;

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

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

  web storage和cookie的区别：

  web storage的概念和cookie类似，区别就是他是为了更大容量的存储而设计的。Cookie的大小是受限的，并且你每请求一个新页面时cookie都会被发送过去，无形中浪费了带宽，另外cookie还需指定作用域，不可以跨域调用。

  除此之外，web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

  但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而