浏览器原理 浏览器本地存储

localstorage 、sessionStorage 、cookie的区别

localStorage

生命周期永久， 除非用户清除浏览器中的localStorage信息，否则永远存在；

存放数据大小一般为5MB；

仅在浏览器中保存，不参与服务器通信；

API调用：

  localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();​//清空localStorage中所有信息

sessionStorage

仅在当前会话下有效，关闭页面或者浏览器后被清除；

存放数据大小一般为5MB；

仅在浏览器中保存，不参与服务器通信；

可以接受源生接口，亦可以再次封装来对Object和Array有更好的支持；

API调用：

 sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    sessionStorage.getItem("key");//获取名称为“key”的值

    sessionStorage.removeItem("key");//删除名称为“key”的信息。

    sessionStorage.clear();​//清空sessionStorage中所有信息

Cookie

• 生命周期为在cookie设置的过期时间之前一直有效，即使窗口或者浏览器关闭；

  存放数据大小为4K；

• 有存储个数限制（各浏览器不同），一般不超过20个；

• 与服务器端通信，每次都会携带在HTTP头中，cookie存储数据过多会带来性能问题； Cookie

• HTTP Cookie，通常叫做Cookie，一开始是在客户端用于存储会话信息的。

Cookie主要构成

1. name：名称，一个唯一确定的cookie的名称，cookie的名称必须经过URL编码。
2. value：值，存储在cookie中的字符串值。值必须被URL编码。
3. Domain：域，指明cookie对哪个域有效，所有向该域发送的请求都会包含这个信息。
4. path：路径，对于指定域中的那个路径，应该向服务器发送cookie。
5. Expires/Max-Age：有效期，表示cookie的有效期。
6. HttpOnly：如果这个这个值设置为true，就不能通过JS脚本获取cookie的值。通过这个值可以有效防止XSS攻击。
7. Secure：安全标志，指定后，cookie只有在使用SSL连接的时候才能发送到服务器。 Cookie的原理
8. 第一次访问网站时，浏览器发出请求，服务器响应请求后，会在响应头中添加一个Set-Cookie，将cookie放入响应请求中。
9. 在第二次发起请求时，浏览器通过Cookie请求头部将cookie信息送给服务器，服务端根据cookie信息辨别用户身份。
10. Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。