面试知识点总结 - js 缓存

数据存储

Storage类型

1. 概念：
   提供最大的存储空间（因浏览器而异）来存储名值对，每个域都有固定大小的存储空间用于保存自己的数据
2. Storage实例的方法：

1. clear()：删除所有值
2. getItem(name)：获取指定名字对应的值
3. setItem(name，value)：给指定名字设置对应的指定值
4. removeItem(name)：删除指定名字的名值对
5. key(index)：获取指定位置的值
6. length：名值对的个数
7. 除了以上方法，还可以用点或者方括号[]语法访问

3. storage事件：

1. Storage类型的对象有任何修改，都会触发storage事件
2. 事件处理程序绑在document上
3. Storage的实例sessionStorage、localStorage都有该事件
4. storage事件的event的属性：

1. domain：发生变化的存储空间的域名
2. key：设置或删除的键名
3. newValue：设置时为新值，删除时为null
4. oldValue：键被修改前的值

5. storage事件示例：

document.addEventListener('storage',function(){
	console.log(event)	//函数event不传，默认为event
})

Storage的实例

1. sessionStorage：会话内有效，可跨页面，只要浏览器不关
2. localStorage：持久保存，直到手动删除或者清除浏览器缓存

Cookie

1. cookie

1. cookie（HTTP Cookie）：最初是在客户端用于存储会话信息的，该标准要求服务器对任意HTTP请求发送带 Set-Cookie 的HTTP头作为响应的一部分，其中包含会话信息
2. 例如：

HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie:name=value
Other-header:other-header-value

Get /index.html HTTP/1.1
Cookie:name-value
Other-header:other-header-value

这个HTTP响应设置一name为名称，value为值的一个cookie，名称和值在传送石都必须时URL编码的，浏览器会存储这样的会话信息并在这之后通过为每个请求添加带Cookie的HTTP头将信息发送回服务器

3. 服务器端设置cookie值，浏览器请求该设置了cookie的服务端页面时会存储下来，以后客户端再发请求给该服务器端时就会自动带上这个cookie
4. cookie时绑定在域名下的，只有该域名可以访问该cookie中的信息，其他域名不可以
5. cookie的name和value都是URL编码的且这两个值是必填项，所以读取或者存储cookie时要用到encodeURIComponent(name/value)和decodeURIComponent(name/value)，浏览器会存储这样的会话信息
6. 每个域名的cookie总数是有限制的，超出限制后在设置时浏览器会清除以前的，可以是用子cookie解决
7. 每个cookie的长度也是有限制的
8. 只有名值对会被发送，其他部分信息不会被发送到服务器
9. cookie构成：

1. 名称：name，必填，一个唯一确定cookie的名称，不区分大小写，必须经过URL编码
2. 值：value，必填，存储在cookie中的字符串，必须经过URL编码
3. 域：domain，指定cookie对于该设置的域有效，不指定则为设置该cookie的那个域；可以包含也可以不包含子域，所有向该域发送的请求都会包含这个cookie信息
4. 路径：path=/，根目录，对于指定域中的该指定的路径有效，其他路径的页面发送请求是则看不到该cookie
5. 失效时间：expires，cookie在该指定时间内有效，超过该时间会被删除（即何时看不到该cookie且停止向服务器发送这个cookie）。默认为浏览器会话结束的时间。所以可以设置很久以后的时间就可以实现关闭浏览器后cookie依然保存在用户的机器上。该时间值为GMT格式的日期（即Wdy,DD-Mon-YYYY HH:MM:SS GMT）或（Wdy Mon DD YYYY HH:MM:SS GMT）
6. 安全标志：secure，指定后cookie只有在使用SSL连接时才发送到服务器
7. 每一段信息都作为Set-Cookie头的一部分，使用分号分隔
8. 例如：

Set-Cookie:name=value;domain=.xxx.com;path=/;secure;expires=Med Sep 09 2020 10:00:00 GMT

2. js中cookie的操作

1. document.cookie：获取当前页面可用的所有cookie的字符串
2. document.cookie=“name=value;domain=domain_name;path=/;secure;expires=expires_time”

document.cookie = 'sid=12345;path=/;domain=127.0.0.1;expires=Wed Sep 9 2020 12:20:20 GMT;secure';

3. 浏览器中通过document.cookie这只的cookie和服务器端设置的为同一个，格式也一样

3. 子cookie

1. 格式

name="name1=value1;name2=value2;name3=value3"

2. 解决浏览器中单域名下cookie的数量限制问题，可以使用子cookie，一个cookie中可以存储多个键值对

4. HTTP专有cookie

1. 浏览器和服务器均可以设置，但只有服务器端才可以读取