JavaScript--cookie

一、概述

• cookie总是保存在客户端中（浏览器端）。
• cookie为了保存sessionID出现的。
• cookie的出现解决了http无状态的问题。

二、特性

• cookie是不安全的
• cookie是可以被篡改和伪造的
• cookie他是以字符串存储的（单一），有很多的数据类型是不支持的（二进制图片，二进制的视频，base64码的视频等等）
• cookie他的大小不能超过4kb（大小只有4kb 容量小）
• cookie会随请求发送
• cookie可以跨域（domain来设置）

三、构成

• 名称：唯一标识 cookie 的名称。cookie 名不区分大小写，因此 myCookie 和 MyCookie 是同一个名称。不过，实践中最好将 cookie 名当成区分大小写来对待，因为一些服务器软件可能这样对待它们。cookie 名必须经过 URL 编码。
• 值：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。
• 域：cookie 有效的域。发送到这个域的所有请求都会包含对应的 cookie。
• 路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。例如，可以指定 cookie 只能由http://www.wrox.com/books/访问，因此访问 http://www.wrox.com/下的页面就不会发送 cookie，即使请求的是同一个域。
• 过期时间：表示何时删除 cookie 的时间戳（即什么时间之后就不发送到服务器了）。默认情况下，浏览器会话结束后会删除所有 cookie。不过，也可以设置删除 cookie 的时间。这个值是 GMT 格式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除 cookie 的具体时间。这样即使关闭浏览器 cookie 也会保留在用户机器上。把过期时间设置为过去的时间会立即删除 cookie。
• 安全标志：设置之后，只在使用 SSL 安全连接的情况下才会把 cookie 发送到服务器。例如，请求 https://www.wrox.com 会发送 cookie，而请求 http://www.wrox.com 则不会。

注意：这些参数在 Set-Cookie 头部中使用分号加空格隔开。

我们可以通过特殊的格式的字符串形式来读写Document对象的cookie属性。

document.cookie //读取当前页面的所有cookie

但是，document.cookie一次只能写入一个Cookie，而且写入并不是覆盖，而是添加。

document.cookie = 'test1=hello'; 
document.cookie = 'test2=world'; 
document.cookie // test1=hello; test2=world

cookie完整的格式：

name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure

注意：在所有这些参数中，只有 cookie 的名称和值是必需的。

（1）value属性

value属性是必需的，它是一个键值对，用于指定Cookie的值。

（2）expires属性

expires属性用于指定Cookie过期时间。它的格式采用Date.toUTCString()的格式。

expires=Thu, 01 Jan 1970 00:00:00 GMT 

如果不设置该属性，或者设为null，Cookie只在当前会话（session）有效，浏览器窗口一旦关闭，当前Session结束，该 Cookie就会被删除。

浏览器根据本地时间，决定Cookie是否过期，由于本地时间是不精确的，所以没有办法保证Cookie一定会在服务器指定的时 间过期。

（3）domain属性

domain属性指定Cookie所在的域名，比如example.com或.example.com（这种写法将对所有子域名生效）、subdomain.example.com。

如果未指定，默认为设定该Cookie的域名。所指定的域名必须是当前发送Cookie的域名的一部分，比如当前访问的域名是 example.com，就不能将其设为google.com。只有访问的域名匹配domain属性，Cookie才会发送到服务器。

（4）path属性

path属性用来指定路径，必须是绝对路径（比如/、/mydir），如果未指定，默认为请求该Cookie的网页路径。

只有path属性匹配向服务器发送的路径，Cookie才会发送。这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹 配发送路径的一部分，就可以发送。比如，path属性等于/blog，则发送路径是/blog或者/blogroll，Cookie都会发送。path 属性生效的前提是domain属性匹配。

（5）secure属性

secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。 该属性只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开。

cookie增删改查方法的封装

//得到cookie
function getCookie(name) {
        let cookieName = `${encodeURIComponent(name)}=`,
          cookieStart = document.cookie.indexOf(cookieName),
          cookieValue = null;
        if (cookieStart > -1) {
          let cookieEnd = document.cookie.indexOf(";", cookieStart);
          if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
          }
          cookieValue = decodeURIComponent(
            document.cookie.substring(
              cookieStart + cookieName.length,
              cookieEnd
            )
          );
        }
        return cookieValue;
      }
        //增加或修改cookie
      function setCookie(name, value, expires, path, domain, secure) {
        let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(
          value
        )}`;
        if (expires instanceof Date) {
          cookieText += `; expires=${expires.toGMTString()}`;
        }
        if (path) {
          cookieText += `; path=${path}`;
        }
        if (domain) {
          cookieText += `; domain=${domain}`;
        }
        if (secure) {
          cookieText += "; secure";
        }
        document.cookie = cookieText;
      }

      //删除cookie
      function unsetCookie(name, path, domain, secure) {
        setCookie(name, "", new Date(0), path, domain, secure);
      }

encodeURIComponent 转码

console.log(encodeURIComponent('{abdejde152}'));

decodeURIComponent 解码

var str = encodeURIComponent('{abdejde152}') //进行编码
console.log(decodeURIComponent(str));//解码

四、localStorage(本地存储)

localStorage和cookie的区别

• cookie的大小只有4kb 对应的localstorage有5M
• cookie会随请求发送 localstorage不会随请求发送
• cookie只能存储字符串 localstorage可以存储对应的图片以及视频的二进制
• 存储的位置不一样的
• cookie是可以过期的 localstorage不能过期

共同点

• cookie和localstorage都是存储在浏览器上
• 存储的内容的形式都是以字符串形式

方法

• 通过设置属性来存储字符串值，查询该属性 来读取该值。

localStorage.user = 'TG';

• 提供了对应的存储（ setItem() ）和读取（ getItem() ）的方法。

localStorage.setItem('user','TG'); //存储一个以“user”的名字存储的数值。 
localStorage.getItem('user'); //读取

• 还可以使用 removeItem() 和 clear() 方法来删除。

localStorage.removeItem('user'); //删除名为“user”的数据。 
localStorage.clear(); //删除所有存储的数据

• 遍历存储数据。

for(var i=0; i < localStorage.length; i++){ 
        var name = localStorage.key(i); //获取第i对的名字 
        console.log(localStorage.getItem(name); //获取该对的值 
}

• 其中的 key 方法，根据位置（从0开始）获得键值

localStorage.key(1);