LocalStorage、SessionStorage与Cookie面试题？看这一篇就够了！

不夜宵吃_
586 阅读7分钟

引言：

在现代Web开发的面试中，前端存储机制如 localStorage、sessionStorage 和 Cookie 的问题是几乎每次都会涉及到的经典考点。无论是初入职场的新手还是经验丰富的开发者，深入理解这三种技术的特点和应用场景都是至关重要的。本文将带你全面解析这些概念，帮助你在面试中脱颖而出，并为实际项目中的应用提供坚实的基础。准备好了吗？让我们一起揭开它们神秘的面纱吧！

一. localStorage(本地存储)

1. 基本概念

localStorage 是 HTML5 引入的一种本地存储机制，它使开发者能够在用户浏览器中持久存储数据。这些数据不会随着页面刷新而丢失，并且除非用户主动清除或删除它们，否则会一直保留在用户的设备上。

  • 特点:

    • 数据没有过期时间。
    • 数据存储量通常较大（一般为5MB左右，具体大小取决于浏览器）。
    • 只能存储字符串类型的数据（复杂对象需先序列化）。
    • 同源策略限制：只有来自相同协议、域名和端口的页面可以访问同一 localStorage 数据。

2. 基本操作

可以进入开发者模式（F12），打开后点击应用程序(sessionStorage和Cookie同理)。

image.png

localStorage 提供了一组简单的方法来管理存储的数据(Key:Value)：

  • 存储数据

    使用 setItem() 方法将数据存储到 localStorage 中。注意，所有数据都会被转换成字符串格式存储。

    localStorage.setItem('name', 'John Doe');

  • 获取数据

    使用 getItem() 方法从 localStorage 中检索数据。

    console.log(localStorage.getItem('name')); // 输出: John Doe

  • 删除数据

    使用 removeItem() 方法删除特定键对应的值。

    localStorage.removeItem('name');

  • 清空所有数据

    使用 clear() 方法清空整个 localStorage。

    localStorage.clear();

  • 遍历所有键值对

      使用 key() 方法结合循环可以遍历所有的键值对。

    for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    console.log(`${key}: ${localStorage.getItem(key)}`);
}

3. 处理复杂数据类型

由于 localStorage 只能存储字符串类型的数据，因此当你需要存储复杂数据结构（如对象或数组）时，必须先将其序列化为 JSON 格式，再进行存储。

  • 存储对象

    const user = { name: 'John Doe', age: 30 };
localStorage.setItem('user', JSON.stringify(user)); // 序列化

  • 读取对象

    const storedUser = JSON.parse(localStorage.getItem('user')); // 反序列化
console.log(storedUser.name); // 输出: John Doe

4. 实际应用场景

localStorage 非常适合用于存储那些不需要频繁更新且对安全性要求不高的数据。以下是一些典型的应用场景：

  • 用户偏好设置: 如主题选择、语言偏好等。

    function saveTheme(theme) {
    localStorage.setItem('theme', theme);
}

function loadTheme() {
    return localStorage.getItem('theme') || 'light'; // 默认为浅色主题
}

  • 表单自动保存: 在用户填写长表单时，可以定期保存表单状态，防止因意外关闭页面导致的信息丢失。

    setInterval(() => {
    const formState = document.querySelector('form').value;
    localStorage.setItem('formState', formState);
}, 5000); // 每5秒保存一次

  • 离线应用: 对于支持离线使用的应用，可以预先缓存一些关键数据，以便在网络不可用时也能提供基本服务。

5. 注意事项

尽管 localStorage 功能强大，但在使用时仍需注意以下几点：

  • 同源策略: localStorage 数据仅在同一协议、域名和端口下可见，这有助于保护用户隐私，但也意味着不同网站之间无法共享数据。

  • 容量限制: 尽管大多数现代浏览器提供了较大的存储空间（约5MB），但当接近上限时，可能会触发警告或错误。合理规划存储内容非常重要。

  • 性能考虑: 过度依赖 localStorage 可能会影响页面加载速度，尤其是在处理大量数据时。建议只存储必要的信息，并尽量减少读写频率。

  • 跨窗口同步问题: 打开不同的URL的标签，他们的localStorage是不同的。当多个标签页同时打开并尝试修改相同的 localStorage 数据时(多个标签页打开的是完全相同的URL)，可能会出现数据不一致的情况。为此，可以通过监听 storage 事件来实现简单的跨窗口通信。

    window.addEventListener('storage', (event) => {
    if (event.key === 'sharedData') {
        console.log(`Shared data updated to: ${event.newValue}`);
    }
});

二. sessionStorage(会话存储)

1. 基本概念

sessionStorage 是 HTML5 引入的一种本地存储机制，它使开发者能够在用户浏览器中为当前会话（session）存储数据。这些数据会在页面关闭时自动清除，并且不会随着页面刷新而丢失。

  • 特点:

    • 数据仅在当前页面会话期间有效，关闭浏览器标签或窗口后数据会被清除。
    • 同一域名下的不同页面可以共享 sessionStorage 中的数据（如果它们是通过同一个浏览器标签打开的）。
    • 只能存储字符串类型的数据（复杂对象需先序列化）。
    • 同源策略限制：只有来自相同协议、域名和端口的页面可以访问同一 sessionStorage 数据。

2. 基本操作

sessionStorage 提供了一组简单的方法来管理存储的数据，这些方法与 localStorage 非常相似：

  • 存储数据  

    使用 setItem() 方法将数据存储到 sessionStorage 中。注意，所有数据都会被转换成字符串格式存储。

    sessionStorage.setItem('name', 'John Doe');

  • 获取数据

    使用 getItem() 方法从 sessionStorage 中检索数据。

    console.log(sessionStorage.getItem('name')); // 输出: John Doe

  • 删除数据

    使用 removeItem() 方法删除特定键对应的值。

    sessionStorage.removeItem('name');

  • 清空所有数据

    使用 clear() 方法清空整个 sessionStorage。

    sessionStorage.clear();

  • 遍历所有键值对

    使用 key() 方法结合循环可以遍历所有的键值对。

    for (let i = 0; i < sessionStorage.length; i++) {
    let key = sessionStorage.key(i);
    console.log(`${key}: ${sessionStorage.getItem(key)}`);
}

3. 处理复杂数据类型

由于 sessionStorage 只能存储字符串类型的数据，因此当你需要存储复杂数据结构（如对象或数组）时，必须先将其序列化为 JSON 格式，再进行存储。

  • 存储对象

    const user = { name: 'John Doe', age: 30 };
sessionStorage.setItem('user', JSON.stringify(user));

  • 读取对象

    const storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name); // 输出: John Doe

4. 实际应用场景

sessionStorage 非常适合用于存储那些只需要在当前会话期间保持的数据。以下是一些典型的应用场景：

  • 表单自动保存: 在用户填写长表单时，可以定期保存表单状态，防止因意外关闭页面导致的信息丢失。

    setInterval(() => {
    const formState = document.querySelector('form').value;
    sessionStorage.setItem('formState', formState);
}, 5000); // 每5秒保存一次

window.addEventListener('beforeunload', () => {
    if (sessionStorage.getItem('formState')) {
        alert('您的表单数据已自动保存。');
    }
});

  • 购物车信息: 对于电子商务网站，可以在 sessionStorage 中暂时存储用户的购物车内容，直到他们完成购买或主动清空购物车。

    function addToCart(item) {
    let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
    cart.push(item);
    sessionStorage.setItem('cart', JSON.stringify(cart));
}

function viewCart() {
    return JSON.parse(sessionStorage.getItem('cart')) || [];
}

  • 会话级别的用户偏好设置: 如临时的主题选择或语言切换等。

    function saveTheme(theme) {
    sessionStorage.setItem('theme', theme);
}

function loadTheme() {
    return sessionStorage.getItem('theme') || 'light'; // 默认为浅色主题
}

5. 注意事项

尽管 sessionStorage 功能强大，但在使用时仍需注意以下几点：

  • 会话依赖性: sessionStorage 数据仅在当前页面会话期间有效，关闭浏览器标签或窗口后数据会被清除。这意味着它不适合长期存储重要数据。
  • 同源策略: sessionStorage 数据仅在同一协议、域名和端口下可见，这有助于保护用户隐私，但也意味着不同网站之间无法共享数据。
  • 容量限制: 尽管大多数现代浏览器提供了较大的存储空间（约5MB），但当接近上限时，可能会触发警告或错误。合理规划存储内容非常重要。
  • 跨窗口同步问题: sessionStorage是基于每个浏览器标签页或窗口独立的存储机制，这意味着不同标签页或窗口之间的 sessionStorage 是完全隔离的，一个标签页无法直接访问另一个标签页的 sessionStorage 数据。即使多个标签页打开的是完全相同的URL，每个标签页的 sessionStorage 仍然是独立的。需要注意的是，由于 sessionStorage 的这种独立性，它不支持跨页面通信，也无法通过监听 storage 事件来实现跨窗口同步。如果需要在多个标签页间共享或同步数据，应该考虑使用 localStorage 或者其他的解决方案，例如 IndexedDB 或通过服务器端进行数据同步。”

三. Cookie

1. 基本概念

Cookie 是一种存储在客户端（通常是用户的浏览器）上的数据片段，它允许网站在用户访问期间或之后记住某些信息。这些信息可以是简单的偏好设置，也可以是复杂的会话标识符。

  • 特点:

    • 每次请求都会自动发送给服务器: 这意味着 Cookie 中的数据会在每个 HTTP 请求中被发送回服务器，增加了网络流量。
    • 大小限制约为4KB: 单个域名下的所有 Cookie 的总大小通常不超过4KB。
    • 支持设置过期时间: 可以设置 Cookie 的有效期，过期后会被自动删除。
    • 安全性选项: 可以设置 Secure 和 HttpOnly 标志增强安全性。
    • 同源策略: Cookie 数据仅在同一协议、域名和端口下可见。

2. 基本操作

在 JavaScript 中，可以通过 document.cookie 来读取、写入和删除 Cookie。

  • 设置 Cookie

    使用 document.cookie 设置一个新 Cookie。需要指定名称、值以及可选的属性如过期时间、路径等。

    // 设置一个名为 username 的 Cookie，值为 John Doe，并设置过期时间为一年
document.cookie = "username=John Doe; expires=" + new Date(2026, 3, 2).toUTCString() + "; path=/";

    注意: expires 参数指定了 Cookie 的过期日期。如果不设置，则 Cookie 将被视为会话 Cookie，在关闭浏览器时自动删除。path 参数指定了 Cookie 可用的路径，默认为 /。

  • 获取 Cookie

    使用 document.cookie 获取所有 Cookie，返回的是一个包含所有 Cookie 的字符串，各 Cookie 之间用分号加空格隔开。

    console.log(document.cookie); // 输出: "username=John Doe"

    由于 document.cookie 返回的是所有 Cookie 的字符串，通常需要编写辅助函数来解析特定的 Cookie。

    function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

console.log(getCookie('username')); // 输出: John Doe

  • 删除 Cookie

    删除 Cookie 需要将它的过期时间设置为过去的时间。

    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

3. 安全性和隐私保护

为了提高安全性，Cookie 提供了几个重要的标志：

  • Secure: 如果设置了这个标志，那么 Cookie 只能通过 HTTPS 协议传输，不能通过 HTTP 传输，这有助于防止中间人攻击。

    document.cookie = "username=John Doe; Secure; path=/";

  • HttpOnly: 如果设置了这个标志，那么 JavaScript 代码无法访问该 Cookie，只能通过 HTTP(S) 请求发送到服务器，这有助于防御 XSS 攻击。

    document.cookie = "sessionToken=abc123xyz; HttpOnly; path=/";

  • SameSite: 控制是否可以在跨站请求中携带 Cookie。有三个可能的值：Strict、Lax 和 None。None 必须与 Secure 标志一起使用。

    document.cookie = "sessionToken=abc123xyz; SameSite=Strict; path=/";

4. 实际应用场景

Cookie 在许多场景中都有广泛应用，以下是几个典型的应用示例：

  • 会话管理: 存储会话标识符（Session ID），以便服务器能够识别用户并在多个页面请求之间保持登录状态。

    // 设置 Session ID
document.cookie = "sessionId=abc123xyz; path=/";

// 获取 Session ID
const sessionId = getCookie('sessionId');

  • 用户偏好设置: 记住用户的语言选择、主题颜色等偏好设置。

    // 设置用户语言偏好
document.cookie = "preferredLanguage=en; expires=" + new Date(2026, 3, 2).toUTCString() + "; path=/";

// 获取用户语言偏好
const language = getCookie('preferredLanguage') || 'en';

  • 购物车信息: 暂时存储用户的购物车内容，直到他们完成购买或主动清空购物车。

    // 添加商品到购物车
function addToCart(item) {
    let cart = JSON.parse(getCookie('cart')) || [];
    cart.push(item);
    document.cookie = `cart=${JSON.stringify(cart)}; path=/`;
}

// 查看购物车
function viewCart() {
    return JSON.parse(getCookie('cart')) || [];
}

5. 注意事项

尽管 Cookie 功能强大，但在使用时仍需注意以下几点：

  • 隐私问题: 用户可能会对网站存储过多的个人信息感到不安，因此应尽量减少不必要的 Cookie 使用，并确保遵守相关的隐私政策和法规（如 GDPR）。
  • 性能影响: 每次 HTTP 请求都会发送所有的 Cookie，因此应尽量减小 Cookie 的大小，并避免不必要的 Cookie 发送。
  • 安全性考虑: 对于敏感信息，建议使用 Secure 和 HttpOnly 标志，并结合 SameSite 属性来防止 CSRF 和 XSS 攻击。

四、三者区别总结

1. 存储期限

  • localStorage：数据没有过期时间，除非用户手动清除浏览器缓存或通过代码调用 localStorage.clear() 或 localStorage.removeItem('key') 删除特定的数据项。
  • sessionStorage：数据仅在当前页面会话期间有效。关闭浏览器标签或窗口后数据会被清除。即使刷新页面，数据仍然存在，直到页面会话结束（通常是关闭标签或窗口）。
  • Cookie：可以设置具体的过期时间。如果不设置过期时间，默认为会话 Cookie，在关闭浏览器时自动删除。可以通过设置 expires 属性或 max-age 来定义 Cookie 的有效期。

2. 存储容量

  • localStorage 和 sessionStorage：通常提供大约5MB的存储空间，但具体大小可能因浏览器而异。
  • Cookie：每个域名下的所有 Cookie 总量通常限制为4KB左右，这对于存储少量信息如会话ID、偏好设置等足够了，但对于大量数据则不适用。

3. 数据传输

  • localStorage 和 sessionStorage：数据仅存储在客户端，不会随 HTTP 请求发送到服务器。
  • Cookie：每次请求都会将相关的 Cookie 发送到服务器，因此增加了一些网络流量。但是这也使得它非常适合于需要在服务器端验证用户状态的情况，比如保持登录状态。

4. 作用域

  • localStorage 和 sessionStorage：遵循同源策略，即只有来自相同协议、域名和端口的页面可以访问同一 localStorage 或 sessionStorage 数据。
  • Cookie：同样遵循同源策略，并且还可以通过设置 path 和 domain 属性来控制哪些路径或子域可以访问该 Cookie。

5. 安全性

  • localStorage 和 sessionStorage：没有内置的安全特性，所有的数据都以明文形式存储。因此不适合存储敏感信息。
  • Cookie：可以通过设置 Secure 标志确保只通过 HTTPS 发送，以及使用 HttpOnly 标志防止 JavaScript 访问，从而提高安全性。

6. 使用场景

  • localStorage：

    • 用户偏好设置保存，例如主题颜色、语言选择等。
    • 不需要频繁更新的数据持久化存储。

  • sessionStorage：

    • 临时存储信息，比如表单输入内容，防止刷新丢失。
    • 购物车信息等需要短期保留的数据。

  • Cookie：

    • 记住用户的登录状态。
    • 跟踪用户行为以实现个性化推荐或广告定向。
    • 在服务器端需要访问的信息，如会话ID。

示例代码

localStorage

// 设置
localStorage.setItem('name', 'John Doe');

// 获取
console.log(localStorage.getItem('name')); // 输出: John Doe

// 删除
localStorage.removeItem('name');

sessionStorage

// 设置
sessionStorage.setItem('cartItem', 'Apple Watch');

// 获取
console.log(sessionStorage.getItem('cartItem')); // 输出: Apple Watch

// 删除
sessionStorage.removeItem('cartItem');

Cookie

// 设置
document.cookie = "username=John Doe; expires=" + new Date(2026, 3, 2).toUTCString() + "; path=/";

// 获取
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
console.log(getCookie('username')); // 输出: John Doe

// 删除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

对比分析

特性localStoragesessionStorageCookie
存储大小约5MB约5MB约4KB
有效期永久页面会话期间可设置
作用域同源同源同源
传输到服务器不传输不传输自动传输
使用场景用户偏好设置表单数据暂存登录状态跟踪

总结

每种存储方式都有其独特的优势和适用场景：

  • localStorage 和 sessionStorage 提供了方便的客户端存储解决方案，适用于无需频繁与服务器交互的数据存储。
  • Cookie 则是跨客户端和服务器端的理想选择，特别是在需要保持用户状态的情况下。

希望这篇文章能够帮助你更好地理解这三种存储机制，并能在实际项目中灵活运用！如果你有任何问题或想法，欢迎在评论区留言讨论！

关注我，获取更多前端开发技巧和干货知识！🌟

avatar
文章
阅读
粉丝