【面试】JavaScript的存储--Cookie、Session、localStorage、sessionStorage

4,272 阅读3分钟

Cookie与Session

1. cookie

  1. cookie客户端的解决方案,是一种网络服务器存储在计算机或移动设备上的纯文本文件,是服务器发送到Web浏览器上的一小块数据。一般大小限制在4kb以内。
  2. cookie是一个在服务器和客户端之间来回传送文本值的内置机制,服务器可以根据cookie追踪用户在不同页面的访问信息。

当接收到客户端发出的HTTP请求时,服务器可以发送带有响应的Set-Cookie标头,然后将cookie与HTTP请求头一起发送请求。

cookie的用处

  • 会话管理:用户账号密码
  • 个性化:用户偏好设置
  • 追踪:记录和分析用户行为

cookie的特点

  • 大小限制在4KB以内
  • 都会消耗网络的带宽
  • 不加密则不安全
  • 使用JS操作Cookie比较复杂

2. Session

  1. Session是一种服务端解决方案,通过服务器来保持状态。
  2. Session是服务器为了保存用户状态而创建的一个特殊对象。客户端请求服务端,服务端会为这次请示开辟一块内存空间。
  3. Session弥补了HTTP的无状态特性。

Session的创建过程

当浏览器第一次访问服务器时,服务器会创建一个Session对象(该对象有唯一的ID,即SessionID)。服务器会将SessionIDcookie的方式返回浏览器。

当浏览器再次访问服务器时,会将SessionID发送过来,服务器依据sessionID就可以找到对应的session对象。

Session的缺点

A 服务器存储了 Session,就是做了负载均衡后,假如一段时间内 A 的访问量激增,会转发到 B 进行访问,但是 B 服务器并没有存储 A 的 Session,会导致 Session 的失效。

Web Storage

如果你想要操作一个域名的会话存储,可以使用Window.sessionStorage;如果想要操作一个域名的本地存储,可以使用Window.localStorage

1. localStorage

只读的localStorage允许访问一个Document的对象Storage,存储的数据将保存在浏览器会话中。

2. sessionStorage

sessionStorage 属性允许你访问一个,对应当前源的sessionStorage对象。它 localStorage相似,不同之处在于localStorage里面存储的数据没有过期时间设置,而存储在sessionStorage里面的数据在页面会话结束时会被清除。

异同点

相同点

  • localStorageSessionStorage一样都是用来存储客户端临时信息的对象。
  • 只能存储字符串对象
  • 不同浏览器无法共享localStorageSessionStroage中的信息。相同浏览器的不同页面间(同源页面)可以共享相同的localStorage,但不能共享sessionStorage

不同点

  • localStorage的生命周期是永久,除非用户清除localStorage信息。
  • sessionStorage的生命周期为当前窗口或标签页。一旦窗口永久关闭就结束。

References

  1. localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能
  2. Session、Cookie、Token 【浅谈三者之间的那点事】
  3. 理解Cookie和Session机制
  4. Storage | MDN
  5. LocalStorage | MDN
  6. sessionstorage和localstorage的区别是啥?