• HTTP1.0中协议是无状态的,但在WEB应用中,在多个请求之间共享会话是非常必要的,所以出现了Cookie
  • cookie是为了辩别用户身份,进行会话跟踪而存储在客户端上的数据

# Cookie原理

Cookie原理

第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会将cookie放入到响应请求中,在浏览器第二次发请求的时候,会把cookie带过去,服务端会辨别用户身份,当然服务器也可以修改cookie内容。

// 服务器设置Cookie
Set-Cookie:name=1111; Path=/

# 特性

  • Cookie一旦创建成功,那么名字无法进行修改;
  • Cookie不支持跨域,这是由Cookie隐私安全性所决定的,这样能够阻止非法获取其它网站的Cookie;
  • 每个单独的域名下面的Cookie数量不能超过20个。
  • 同一个域名下的所有请求,都会携带 Cookie。
  • Cookie 是有体积上限的,它最大只能有 4KB。当 Cookie 超过 4KB 时,将被裁切。

# 使用方法

// 读取cookie 返回字符串
const allCookies = document.cookie;

// 增加cookie  newCookie是一个键值对形式的字符串。需要注意的是,用这个方法一次只能对一个cookie进行设置或更新。
document.cookie = newCookie;

以下可选的cookie属性值可以跟在键值对后,用来具体化对cookie的设定/更新,使用分号以作分隔:

  • path: 表示 cookie 影响到的路由,如 path=/。如果路径不能匹配时,浏览器则不发送这个Cookie
  • httpOnly: 如果在Cookie中设置了HttpOnly属性值true,那么通过JavaScript脚本将无法读取到cookie信息,保证Cookie不会被泄露,这样能有效的防止XSS攻击;
  • name: Cookie的名称,Cookie一旦创建,名称便不可更改;一个域名下绑定的cookie,name不能相同,相同的name的值会被覆盖掉。
  • value: Cookie的值。如果值为Unicode字符,需要为字符编码;如果值为二进制数据,则需要使用BASE64编码;
  • expires: 是一个绝对的过期时间,如果没有指定或为0表示当前会话有效;
  • maxAge: 是以秒为单位的,是一个相对时间。正常情况下,max-age的优先级高于expires。Max-Age为正数时,cookie会在Max-Age秒之后,被删除,当Max-Age为负数时,表示的是临时储存,不会生出cookie文件,只会存在浏览器内存中,且只会在打开的浏览器窗口或者子窗口有效,一旦浏览器关闭,cookie就会消失,当Max-Age为0时,又会发生什么呢,删除cookie,因为cookie机制本身没有设置删除cookie,失效的cookie会被浏览器自动从内存中删除,所以,它实现的就是让cookie失效。
  • domain: 可以访问该Cookie的域名,如果设置为“.immoc.com”,则所有以“immoc.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”;
  • comment: Cookie的用处说明,浏览器显示Cookie信息的时候显示该说明。
  • secure:当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效。

# 应用场景

  • Cookie和Session结合使用是最常见的使用场景。我们把session_id存储在Cookie当中,然后每次请求的时候携带这个session_id,这样我们就知道是谁发起的请求,从而返回对应的信息;
  • 统计页面的点击次数。

# cookie使用注意事项

  • 可能被客户端篡改,使用前验证合法性
  • 不要存储敏感数据,比如用户密码,账户余额
  • 使用httpOnly保证安全
  • 尽量减少cookie的体积
  • 设置正确的domain和path,减少数据传输

# Local Storage

# 优势

  • 大小方面相比,LocalStorage突破了4KB大小体积限制,一般是5MB;
  • LocalStorage 是持久化的本地存储,存储在其中的数据是永远不会过期的,使其消失的唯一办法是手动删除;
  • 仅位于浏览器端,不与服务端发生通信。,不会像Cookie那样,每次的HTTP请求都会携带。

# 劣势

  • 浏览器兼容性问题,IE只有在IE8以上的版本才会支持;
  • 如果浏览器设置为隐私模式,那么我们无法读取LocalStorage;
  • LocalStorage受同源策略的限制,即协议、端口、主机地址有任何一个不同,则无法访问。

# Local Storage 应用场景

可以存储一些全局状态,数据。比如:个人昵称、不常改动的图片信息等。对于换肤这个需求,我们完全可以把换肤的信息存储在LocalStorage当中,操作LocalStorage即可。

# SessionStorage

Session Storage 是临时性的本地存储,它是会话级别的存储,当会话结束(页面被关闭)时,存储内容也随之被释放。

# SessionStorage 应用场景

由于SessionStorage具有时效性,常用的业务场景比如网站常见的游客登录,就可以存储在SessionStorage当中,还有网站的一些临时浏览记录都可以使用SessionStorage来进行记录。

# Local Storage 与 Session Storage

  • SessionStorage和LocalStorage一样都是在本地进行数据存储;
  • Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 特别的一点在于,即便是相同域名下的两个页面,只要它们不在同一个浏览器窗口中打开,那么它们的 Session Storage 内容便无法共享。
  • LocalStorage和SessionStorage都不能被爬虫爬取;
  • LocalStorage和SessionStorage的API用法是非常相似的,具体的API使用方法如下:
// 保存数据,以键值对的方式储存信息;
setItem (key, value)
// 获取数据,将键值传入,即可获取到对应的value值;
getItem (key)
// 删除单个数据,根据键值移除对应的信息
removeItem (key)
// 删除所有的数据
clear ()
// 获取某个索引的key
key (index)

# IndexedDB

IndexDB 是一个运行在浏览器上的非关系型数据库。理论上来说,IndexDB 是没有存储上限的(一般来说不会小于 250M)。它不仅可以存储字符串,还可以存储二进制数据。。了解更多

# 参考

更新时间: 5/13/2020, 11:23:00 PM