每一个问题都是机会

浏览器 LocalStorage、SessionStorage 与 Cookie 区别

文章目录
  1. Cookie
  2. LocalStorage
  3. SessionStorage

Cookie

  1. 大小约为4KB。
  2. 当浏览器发送请求到服务器后,返回的响应头中会带有一个Set-Cookie的信息,只要浏览器看到这个信息,就会将Cookie写入。
  3. 当浏览器再次发送请求时,会自动携带上Cookie到服务器端。
  4. 为了让服务器可以识别用户身份,所有请求都会自动携带该域名的Cookie。

LocalStorage

  1. 键值对形式,键和值都只能存储字符串,如果是对象或数字会自动转换为字符串。
  2. 在浏览器上查看方式:
    • Chrome:F12 > Application > LocalStorage
  3. 默认大小为5MB。
  4. 不像Cookie会随请求发送到服务器端,存储只在客户端浏览器生效,因此可以减少网络流量。
  5. 生命周期(没有过期时间,除非手动删除),清空LocalStorage的时机:
    • 域名变动(二级域名.主域名):主域名、二级域名不共享。
    • 开启无痕窗口:清空。
    • F5刷新:不清空。
    • Ctrl+F5:不清空。
    • 开新标签页:不清空。
    • 关闭浏览器再打开:不清空。

实际操作

//LocalStorage
//存储数据
localStorage.setItem('Account', 'aaa');
//获取数据
localStorage.getItem('Account');
//移除特定数据
localStorage.removeItem('Account');
//一次性全部清除
localStorage.clear();

SessionStorage

  1. 除清空时机外,其他机制与LocalStorage相同。
  2. 清空LocalStorage的时机:
    • 域名变动(二级域名.主域名):主域名、二级域名不共享。
    • 开启无痕窗口:清空。
    • 开新标签页(非复制):清空。
    • 关闭浏览器再打开:清空。
    • F5刷新:不清空。
    • Ctrl+F5:不清空。
    • 开新标签页(复制):不清空。

实际操作

//SessionStorage
//存储数据
sessionStorage.setItem('Account', value);
//获取数据
sessionStorage.getItem('Account');
//移除特定数据
sessionStorage.removeItem('Account');
//一次性全部清除
sessionStorage.clear();
赞(3)
未经允许不得转载:技术好学屋 » 浏览器 LocalStorage、SessionStorage 与 Cookie 区别
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址