随着Web应用程序的出现,直接在客户端存储用户信息的需求也随之出现。与特定用户相关的信息应该保存在用户的机器上,比如登录信息、个人偏好等等。针对这个问题的第一个解决方案就是cookie。
cookie
HTTP cookie通常也叫作cookie
,最初用于在客户端储存会话信息。这个规范要求服务器在响应HTTP请求时,通过Set-CookieHTTP头部包含会话信息。
1.限制
cookie是与特定域绑定的。设置cookie后,它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放,不被其他域访问。
因为cookie存储在客户端机器上,所以为保证它不会被恶意利用,浏览器会施加限制。会限制cookie个数、cookie的大小、每个域的cookie个数和每个域的字节。
2.cookie的构成
cookie在浏览器中有👇构成:
⚪名称:唯一标识cookie的名称。cookie名大小写不敏感,不过推荐区别大小写。必须通过URL编码
⚪值:存储在cookie里的字符串值。必须通过URL编码
⚪域:cookie的有效域。发的送到这个域的所有请求都会包含对应的cookie。
⚪路径:请求URL中包含这个路径才会把cookie发送到服务器。
⚪过期时间:表示何时删除cookie的时间戳。默认情况下,浏览器会话结束后会删除所有cookie。
⚪安全标志:设置之后,只在使用SSL安全连接的情况下才会把cookie发送到服务器上。
这些参数在Set-Cookie头部中使用分号加空格隔开👇
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value;expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value
这个头部设置了一个名字为"name"的cookie,这个cookie在上面写的那个时间过期,对www.worx.com和他的子域有效。
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value;expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com;secure
Other-header: other-header-value
在路径后面加上secure
后表明这个cookie只能在SSL链接上发送。
3.JavaScript中的cookie
在JavaScript中处理cookie比较麻烦,因为接口过于简单,只有BOM的document.cookie属性。根据用法不同,该属性表现迥异。要使用cookie的属性时,document.cookie
来返回页面中所有有效cookie字符串,以分号分开👇
name1=value1;name2=value2
所有名和值都是URL编码的,因此必须使用decodeURIComponent()
解码。
在设置值时,可以通过document.cookie属性设置新的字符串。这个字符串被解析后会添加到原来的cookie中。设置cookie不会覆盖之前任何的cookie,除非设置了已有的cookie。设置cookie的格式👇,与Set-Cookie头部的格式一样:
name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
👆,只有cookie的名称和值是必须的👇最好使用encodeURIComponent()
编码
document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");
因为设置过于繁琐,📕中还给设置cookie编写了一个函数,以后用到会补充
4.子cookie
为了用更多的cookie发明的子cookie。我现在一个cookie都没有用,我看起来真的没啥用,以后用到了会补充。
5.使用cookie的注意事项
处理cookie的过程是在服务器上进行的,JavaScript并不能完成这个过程,所以cookie还是尽量保存必要的信息。
❗cookie中不要保存重要或敏感的信息。
Web Storage
Web Storage规范最新的版本是第二版,这一版规定的主要有两个目标:
⚪提供在cookie之外的存储会话数据的途径
⚪提供跨会话持久化存储大量数据的机制
定义了两个对象👇
localStorage
:永久存储机制。
sessionStorage
:跨会话的存储机制。
1.Storage类型
clear()
:删除所有值。
getItem(name)
:取得给定name值。
key(index)
:取得给定数值位置的名称。
removeItem(name)
:删除给定name值。
setItem(name,value)
:设置给定name值。
2.sessionStorage对象
使用setItem()
方法直接给属性添加数据👇
//使用方法存储数据
sessionStorage.setItem("name","Nick");
//使用属性存储数据
sessionStorage.book = "Professional JavaScript";
3.localStorage对象
4.存储事件
文章内容参考:JavaScript高级程序设计(第四版)标题样式来自:juejin.cn/post/684490…
哪里写错了就联系我🐧:54269504