一cookie

1. cookie在浏览器和服务器间来回传递。
2. cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
   3.cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

1、cookie

HTTP cookie，通常直接叫做cookie，是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。

优点：兼容性好

缺点：一是增加了网络流量；二则是它的数据容量有限，最多只能存储4KB的数据，浏览器之间各有不同；三是不安全。

存储数据

document.cookie= “key = value”
数据的存储是 可以= value 的格式

获取 数据
document.cookie
这里的 （document.cookie）是一个字符串 ，我们需要把字符串转化成对象 再遍历这个对象 取到我们想要的 key 对应的value值

封装成函数用来取值

// 取cookie里面指定key 的值的函数
function getCookie(key){ 注：这里的key 应该是字符串
var arr = document.cookie.split('; ');
for(index in arr){
var resArr = arr[index].split('=');
if(resArr[0] == key){
return resArr[1];
}
}

    }

二localStorage

window.localStorage - 存储没有截止日期的数据

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
//删除
localStorage.removeItem("lastname");

window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";

使用前应该先判断浏览器支不支持这个方法

if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉！不支持 Web Storage ..
}

用法