Web的存储方式

2021-7-19 11:08:8

#前端

10

前言

最近在重温cookie，session和storage方面的东西，在此作一笔记。

为什么要用

  • HTTP协议是一种无状态的协议，也就是说一旦数据交换完毕后，该链接就会关闭，也就意味着服务器不能跟踪该会话，不能识别发起HTTP的客户端是谁了。
  • 具体表现
    • 当页面跳转的时候，网站的登录状态就丢失了，进入一个新页面就要重复登陆。
    • 服务端无法识别客户端用户。

详解

cookie

  • 本质： 一小段文本信息。
  • 用处：
    • 存储客户端通行证，客户端每次发起请求都携带这一通行证以便服务端辨认。
    • 存储客户端首选项之类的通用数据，不建议存储业务数据。
  • 优点
    • 兼容性好，基本兼容所有市面上的主流浏览器。
  • 缺点
    • 存储空间小，一般一条cookie只存储4KB左右的数据。
    • 一个域名一般不能有超过20条cookie
    • 性能影响，cookie会被放置在HTTP协议的请求头中发送给服务端
    • 安全差，cookie存储的数据是可以被访问的
  • 使用方法
Cookie c = new Cookie(\"username\",\"peter\");// 新建一个Cookie对象
c.setMaxAge(24*60*60);                    // 设置过期时间1天，以秒为单位
response.addCookie(c);                    // 保存cookie到客户端

session

  • 是一种抽象概念，即会话，用于记录一个用户在我们网站上的一些行为、一些状态，可以理解为一个上下文，Context。这些用户状态可以利用Cookie直接保存在前端，也可以保存在后台。

storage

  • 作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能
  • 通过window对象操作，以域名（domain）区分

localStorage

  • 存储的是永久性的数据
// 存储
localStorage.setItem(\"lastname\", \"Smith\");
// 检索 localStorage.getItem(\"lastname\");

sessionStorage

  • 临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。
// 存储
sessionStorage.setItem(\"lastname\", \"Smith\");
// 检索 sessionStorage.getItem(\"lastname\");

Github登录