面试官要是问 localStorage、sessionStorage 与 cookie 的区别？你就这样回答

约翰_麦卡岩
0 阅读5分钟

在 Web 开发中，数据存储是一个非常重要的环节。以前，我们常常遇到这样的问题：页面一刷新，之前写的数据就丢失了。为了解决这个问题，HTML5 引入了本地存储技术，其中 localStorage 和 sessionStorage 是两种非常重要的存储方式。此外，cookie 也是一种常见的存储方式。本文将详细介绍这三者的区别，帮助你更好地选择适合的存储方式。

一、localStorage

（一）定义

localStorage 是一种本地存储技术，它允许我们在用户的浏览器中存储数据。这些数据以键值对的形式存储，可以被多个窗口共享，并且数据会一直存在，除非用户手动删除，即使浏览器关闭后也会存在。

（二）特性

  1. 持久性：localStorage 存储的数据是持久的，不会因为浏览器的关闭而丢失。
  2. 容量：localStorage 的存储容量一般为 5MB 左右，比 cookie 大得多。
  3. 多窗口共享：同一浏览器下的多个窗口可以共享 localStorage 中的数据。
  4. 键值对存储：数据以键值对的形式存储，可以通过键名来访问和操作数据。

c0fb920e78699714e1cb35c77031f4e8.png

ce71190a848b99d9d1241ef36dfa215e.png

（三）使用方法

  1. 存储数据 
    localStorage.setItem('name', '张三');
localStorage.setItem('age', 18);
  2. 获取数据 
    console.log(localStorage.getItem('name'));
  3. 删除数据 
    localStorage.removeItem('name');
  4. 修改数据 
    localStorage.setItem('name', '李四');

（四）注意事项

  1. 存储限制：虽然 localStorage 的容量比 cookie 大，但也不能超过 5MB。
  2. 数据类型：localStorage 只能存储字符串。如果需要存储其他类型的数据，需要先将其转换为字符串。

二、sessionStorage

（一）定义

sessionStorage 也是一种本地存储技术，它允许我们在用户的浏览器中存储数据。与 localStorage 不同的是，sessionStorage 的数据仅在当前浏览器会话期间有效，当关闭当前浏览器标签页或窗口后，存储在 sessionStorage 中的数据会被自动清除。

（二）特性

  1. 会话性：sessionStorage 存储的数据仅在当前浏览器会话期间有效，关闭浏览器后数据会丢失。
  2. 容量：sessionStorage 的存储容量一般为 5MB 左右，与 localStorage 相同。
  3. 键值对存储：数据以键值对的形式存储，可以通过键名来访问和操作数据。

（三）使用方法

  1. 存储数据 
    sessionStorage.setItem('name', '乡乡');
  2. 获取数据 
    console.log(sessionStorage.getItem('name'));
  3. 删除数据 
    sessionStorage.removeItem('name');

（四）注意事项

  1. 存储限制：sessionStorage 的容量也不能超过 5MB。
  2. 数据类型：sessionStorage 也只能存储字符串。如果需要存储其他类型的数据，需要先将其转换为字符串。

三、cookie

（一）定义

cookie 是一种存储在用户浏览器中的小型数据片段，它允许服务器在用户的浏览器中存储和检索数据。cookie 通常用于跟踪用户的状态，例如登录信息、用户偏好设置等。

（二）特性

  1. 服务器可访问：cookie 存储于用户的浏览器中，但服务器也可以访问和修改 cookie 的内容。
  2. 容量限制：单个 cookie 的最大容量为 4KB，每个域名下可存储的 cookie 数量通常为 20 个左右。
  3. 生命周期：cookie 的生命周期可以通过设置过期时间来控制。如果没有设置过期时间，则 cookie 为会话级 cookie，仅在浏览器会话期间有效。
  4. 跨域限制：cookie 不能跨域共享，不同域名的页面无法访问彼此的 cookie。

（三）使用方法

  1. 存储数据 
    document.cookie = 'name=佳佳; expires=' + new Date(new Date().getTime() + 1000 * 60 * 60 * 24).toUTCString();
  2. 获取数据 
    console.log(document.cookie);
  3. 删除数据 
    document.cookie = 'name=; expires=' + new Date(0).toUTCString();

（四）注意事项

  1. 存储限制：cookie 的容量较小，不能超过 4KB。
  2. 数据类型：cookie 也只能存储字符串。如果需要存储其他类型的数据，需要先将其转换为字符串。
  3. 安全性：cookie 可能会被用户修改或删除，因此不应存储敏感信息。

四、三者的区别

（一）存储范围

  • cookie：存储于用户的浏览器中，服务器和浏览器都可以访问。
  • localStorage 和 sessionStorage：仅存储在浏览器的本地存储中，服务器无法直接访问。

（二）存储容量

  • cookie：单个 cookie 最大容量为 4KB，每个域名下可存储的 cookie 数量通常为 20 个左右。
  • localStorage 和 sessionStorage：存储容量一般为 5MB 左右。

（三）生命周期

  • cookie：可以通过设置过期时间来控制生命周期，也可以设置为会话级 cookie。
  • localStorage：数据持久存储，除非用户手动清除浏览器缓存或通过代码主动删除。
  • sessionStorage：数据仅在当前浏览器会话期间有效，关闭浏览器后数据会丢失。

（四）应用场景

  • cookie：主要用于用户登录状态的维护、网站个性化设置的存储等。
  • localStorage：适用于需要在多个页面之间持久化存储大量数据的场景。
  • sessionStorage：适合存储仅在当前会话中需要的数据。

五、总结

localStorage、sessionStorage 和 cookie 都是 Web 存储技术，但它们各有特点和适用场景。localStorage 适用于需要持久化存储大量数据的场景，sessionStorage 适用于仅在当前会话中需要的数据，而 cookie 则主要用于用户登录状态的维护和网站个性化设置的存储。在实际开发中，我们需要根据具体的需求选择合适的存储方式，以实现最佳的用户体验和数据管理效果。

avatar
文章
阅读
粉丝