webStroge

http cookies

HTTP cookies，我们通常称之为“cookie”，简单地说，cookie 就是浏览器储存在用户电脑上的一小段文本文件。cookie 是纯文本格式，不包含任何可执行的代码。
一个 Web 页面或服务器告知浏览器按照一定规范来储存这些信息，并在随后的请求中将这些信息发送至服务器，Web 服务器就可以使用这些信息来识别不同的用户。

Cookie主要用在以下三个方面:

1. 会话状态管理（如用户登录状态、购物车）
2. 个性化设置（如用户自定义设置）
3. 浏览器行为跟踪（如跟踪分析用户行为）
   Cookie的四个可选项：

• expires (过期时间选项)
• domain
• path 选项
• secure选项

JavaScript通过Document.cookies访问Cookie

通过Document.cookie属性可以来创建新的Cookie，也能够通过该属性来访问未被指定HttpOnly标志的Cookie。

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry" 

参考链接：
cookie: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

js-cookie: https://github.com/js-cookie/js-cookie/tree/latest#readme

cookie-parser: https://github.com/expressjs/cookie-parser

JWT

JSON Web Token（JWT）是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。

一个JWT实际上就是一个字符串，它由三部分组成，头部、载荷与签名。

载荷（Payload）

{
    "iss": "daizengyu”,   // 该JWT的签发者
    "iat": 1441593502,   // 在什么时候签发的
    "exp": 1441594722, // 什么时候过期，这里是一个Unix时间戳
    "aud": “www.iyunxiao.com", // 接收该JWT的一方
    "sub": “A@iyunxiao.com", // 该JWT所面向的用户
    "from_user": "B",
    "target_user": "A"
}

将上面的JSON对象进行[base64编码]可以得到下面的字符串。这个字符串我们将它称作JWT的Payload（载荷）。

头部（Header）

JWT还需要一个头部，头部用于描述关于该JWT的最基本的信息，例如其类型以及签名所用的算法等。这也可以被表示成一个JSON对象。

{
  "typ": "JWT",
  "alg": "HS256"
}

对它也要进行Base64编码，之后的字符串就成了JWT的Header（头部）

签名（signature）

将前面的两个编码后的字符串都用句号.连接在一起（头部在前），就形成了签名。

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0

最后，我们将上面拼接完的字符串用HS256算法进行加密。在加密的时候，我们还需要提供一个密钥（secret）。如果我们用yunxiao作为密钥的话，那么就可以得到我们加密后的内容

将头部、载荷与签名以 “.” 连在一起，我们就得到了完整的JWT。

参考链接： http://blog.leapoahead.com/2015/09/06/understanding-jwt/

HTML5 Storage

• localStorage
  是一种没有时间限制的数据存储方式，可以将数据保存在客户端的硬盘或其他存储器。存储时间可以是一天或几年，浏览器的关闭并不意味着数据的消失。当再次打开浏览器时，依然可以访问到這写数据。localStoage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期。

• sessionStorage
  指的是针对一个session的数据存储，即将数据保存在session对象当中。Web中的session指的是用户在浏览某个网站时，从进入网站到关闭网站所经过的这段时间，可以称为用户与浏览器进行交互的“会话时间”。session对象用来保存这个时间段内所有要求保存的数据。当用户关闭浏览器时，这些数据会被删除。

• 属性

• length 是 Storage 接口的只读属性，返回一个整数，表示存储在 Storage 对象里的数据项（data items）数量。
  eg: var aLength = storage.length;
• setItem() 作为 Storage 接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。
  eg: storage.setItem(keyName, keyValue);
• keyName： 一个 DOMString，要创建或更新的键名。
• keyValue： 一个 DOMString，要创建或更新的键名对应的值。

• getItem() 作为 Storage 接口的方法，接受一个键名（key name）作为参数，并返回对应键名的值（key’s value）。
  eg: var aValue = storage.getItem(keyName);

• keyName 一个包含键名的 DOMString。
  • key() 作为 Storage 接口的方法，接受一个数值 n 作为参数，返回存储对象第 n 个数据项的键名。
  eg: var aKeyName = storage.key(key);

• key: 一个整数，表示要获取的键名索引。
  方法
  • removeItem() 方法，接受一个键名作为参数，会把该键名从存储中移除。
  eg: storage.removeItem(keyName);

• keyName: 一个 DOMString，即你想要移除的键名。
  • clear() 方法，调用它可以清空存储对象里所有的键值。
  eg: storage.clear();

-----------------------------------------------------------END------------------------------------------------------------------------