目录
Web Stroage
Web Stroage包含localStorage、sessionStorage两种。
localStorage 与 sessionStroage
有何不同?
- localStorage 中存储的数据除非是手动删除,否则会一直保存;
- sessionStorage中存储的数据仅在页面会话期间保存,一旦关闭页面数据也是删除了
有何相同?
- 同属于Storage类,所以都只能存储字符串,非字符串存储会被自动转换成字符串
- 操作Storage数据的方法都相同
- 操作Storage数据都会触发storage事件
- 都以windows对象的属性形式存在
- 都只能在同源的页面被访问到
storage事件
每次对Storage对象进行操作,都会触发storage事件,不管是删除还是新增,以下是storage事件里返回来的值
newValue: 如果是delete的话,则会返回null
/** A StorageEvent is sent to a window when a storage area it has access to is changed within the context of another document. */
interface StorageEvent extends Event {
/**
* Returns the key of the storage item being changed.
*/
readonly key: string | null;
/**
* Returns the new value of the key of the storage item whose value is being changed.
*/
readonly newValue: string | null;
/**
* Returns the old value of the key of the storage item whose value is being changed.
*/
readonly oldValue: string | null;
/**
* Returns the Storage object that was affected.
*/
readonly storageArea: Storage | null;
/**
* Returns the URL of the document whose storage item changed.
*/
readonly url: string;
}
window.onstorage(ev:StorageEvent) => {}
方法
- clear(): 删除所有的值
- getItem(name):获取指定名字对应的值
- key(index):获取index位置出的name
- removeItem(name):删除由name指定的名值对儿
- setItem(): 为指定的name设置value值
session与cookie
都是由服务端生成,只不过session通过数据库什么的保存在服务端,而cookie则发送给客户端保存;
session,是保存在服务端的数据,用来跟踪用户的状态,而cookie是保存在客户端的,是客户端用来记录用户信息的一种机制
cookie是由服务器生成发送给客户端的,然后有客户端保存,服务器具体通过set-cookie首部字段来设置
关于cookie
cookie在性质上是绑定在特定的域名下的,当设定了一个cookie后,再给创建它的域名发送请求时,都会包含这个cookie
关于cookie中的键值对?
cookie中的键值,都经过encodeURIComponent()进行编码,所以想要获取正确的值时,应该通过decodeURIComponent()来进行解码
如何设置cookie值?
document改变cookie的值,document.cookie="name=value;",如果cookie中已有相同的name键值,会覆盖原先的value值,否则会增加
不过这个方法一次只能设置一个cookie;同时设置多个的话后面的值会被忽略
怎么删除cookie值?
如果想要删除某个cookie值,可以通过expires设置一个有效时间(如果有效时间过期的话,那么就会永久删除这个cookie值)
document.cookie="c_first_ref=unit;expires=expires=Thu, 01 Jan 1970 00:00:00 GMT;"
cookie由哪些子段组成
name、value、
domain(cookie来源的域名)、
path(定义了Web服务器上哪些路径下的页面可获取服务器设置的Cookie,如果缺省时,则Path的属性值为Web服务器传给浏览器的资源的路径名)、
Expires/Max-Age(cookie使用有效期)、
size: cookie字节大小
HttpOnly:如果设置了,那么就无法通过js脚本来读取cookie信息如下图所示,设置了httpOnly的三个cookie无法通过js来读取
Secure:在Cookie中标记该变量,表明只有当浏览器和Web Server之间的通信协议为加密认证协议时,浏览器才向服务器提交相应的Cookie。当前这种协议只有一种,即为HTTPS、
SameSite:用来限制第三方cookie,三个值(strict(同源请求才发送cookie)、Lax(get请求可发送)、none)
关于浏览器对每个域名cookie数量的限制?
可以使用子cookie来绕开这个限制,实现方案是:name=name1=value&name2=value2&name3=value3....
使用cookie需要注意的事项
因为cookie是附加在请求上面的,所以cookie越多,意味着传输的数据也会更多,如果这些数据只用存储在客户端的话,可以考虑使用Web Storage;