简单了解Web Stroage和cookie、session的区别

目录

 

Web Stroage

有何不同？

有何相同？

storage事件

方法

session与cookie

关于cookie

关于cookie中的键值对？

如何设置cookie值？

怎么删除cookie值？

cookie由哪些子段组成

关于浏览器对每个域名cookie数量的限制？

使用cookie需要注意的事项

---

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;