localstorage、sessionstorge、cookie

localstorage、sessionstorge、cookie

• 目前浏览器端常用数据存储有三种 localstorage、sessionstorge、cookie，他们之间各有优劣。

localstorage 和 sessionstorge

• localstorage 本地存储，可以在浏览器端存储数据。在PC端数据大小可达4M，手机端可有2M。

• sessionstorge 会话存储，同样可以在浏览器端存储数据。

localstorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。而sessionstorge存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当页面关闭时随即销毁。

两者使用方式

window.localstorage.getItem(name) 返回值为设置的value
window.localstorage.setTime(name, value)

window.sessionstorge.getItem(name) 
window.sessionstorge.setTime(name, value)

cookie 和 session

由于 http 是无状态连接，服务器端无法记录当前登录用户的信息。从而提出 session 会话存储

Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

一般来说，不建议浏览器端直接操作 cookie,而应该交由服务器处理。但是如果浏览器端禁用cookie，session将无法使用。

cookie 是由服务器端的接口响应头中的 set-cookie 字段进行操作，当浏览器接受到这个字段会自动保存cookie。

Set-Cookie: ab_jid=d5b6e97ffcaafcead77036838b78283dcb82; Path=/; Domain=miao.baidu.com; Max-Age=2147483647; HttpOnly; Secure; SameSite=None

• set-cookie 浏览器端将会设置 ab_jid 的值为 d5b6e97ffcaafcead77036838b78283dcb82
• Domain 设置 miao.baidu.com域名
• Path 的意思是 该域名下的路径，当为 / 所有路径都可使用
• Max-Age 过其实创建cookie的过期时间，单位秒
• Secure cookie 只有在https连接中被验证
• SameSite Lax 属性只会在使用危险HTTP方法发送跨域cookie的时候进行阻止。 Strict是最严格的防护，有能力阻止所有CSRF攻击。然而，它的用户友好性太差，因为它可能会将所有GET请求进行CSRF防护处理。