cookies与webStorage

一、cookie的实现方法

cookies是存储在用户本地终端上的数据,cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，而且还可以限制失效时间。

//写cookie
function writeCookie(name, value, hours, path) {
    var expire = "";
    if (hours !== null) {
        expire = new Date((new Date()).getTime() + hours * 3600000);
        expire = "; expires=" + expire.toGMTString();
    }
    path = path ? "; path=" + path : "";
    document.cookie = name + "=" + encodeURIComponent(value) + expire + path;
};

//读取cookie
tools.readCookie = function (name) {
    var cookieValue = "";
    var search = name + "=";
    if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = document.cookie.indexOf(";", offset);
            if (end == -1) end = document.cookie.length;
            cookieValue = decodeURIComponent(document.cookie.substring(offset, end));
        }
    }
    return cookieValue;
};

二、web Storage

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
注：storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。
两者的实现方法相同。

• 1、.setItem( key, value)存储value，将value存储到key字段：

  sessionStorage.setItem("key", "test");
  localStorage.setItem("site", "segmentFault");

• 2、.getItem(key)获取value，获取指定key本地存储的值:

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

• 3、.removeItem(key)删除key,删除指定key本地存储的值:

  sessionStorage.removeItem("key"); localStorage.removeItem("site");

• 4、.clear()清除所有的key/value

  sessionStorage.clear();
  localStorage.clear();

共同点：

它们都是保存在浏览器端，且同源的。

区别：

• 1、cookies
  （1）cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。
  （2）cookie数据路径（path）的概念，可以限制cookie只属于某个路径下。
  （3）存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
  （4）cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  （5）cookie也是在所有同源窗口中都是共享的。

Web Storage不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，大概5M左右。

• 2、LocalStorage
  （1）localStorage 在所有同源窗口中都是共享的。
  （2）始终有效，窗口或浏览器关闭也一直保存，除非手动删除，因此用作持久数据。
• 3、sessionStorage
  （1）保存用户临时会话数据,一旦关闭浏览器，所有数据都会消失。
  （2）sessionStorage不在不同浏览器窗口中共享。