前端面试题71（js本地存储与cookie区别）

JavaScript中的本地存储主要通过两种方式实现：Web Storage（包括localStorage和sessionStorage）和Cookie。它们都用于在客户端存储数据，但有各自的特点和适用场景。下面详细对比它们之间的区别：

1. 存储容量

• Cookie: 通常限制在4KB左右，这个大小限制了能存储的数据量。
• localStorage: 大多现代浏览器支持至少5MB的存储空间，远大于Cookie。
• sessionStorage: 同样享受与localStorage相似的大容量存储空间。

2. 数据有效期

• Cookie: 可以设置过期时间（Expires/Max-Age），支持会话级别（随浏览器关闭而消失）或持久化存储。
• localStorage: 没有过期时间，数据一直存在，除非用户手动清除浏览器数据或通过代码删除。
• sessionStorage: 仅在当前浏览器会话期间有效，标签页或窗口关闭后数据就会被清除。

3. 数据访问范围

• Cookie: 默认情况下，同源策略下所有同一域名下的页面都可以访问Cookie，可以通过设置Domain属性来扩大或限制这一范围。
• localStorage/sessionStorage: 受同源策略限制，且每个域下的localStorage和sessionStorage是独立的，不同源的页面无法访问对方的数据。

4. 传输机制

• Cookie: 随HTTP请求自动发送到服务器，即使不需要这些数据，这可能增加网络流量。
• localStorage/sessionStorage: 不会自动随HTTP请求发送，需要通过JavaScript手动读取和设置，更适合存储不敏感的客户端数据。

5. 安全性

• Cookie: 易受到跨站脚本攻击(XSS)，特别是包含敏感信息如认证token时。可以设置HttpOnly标志来防止JavaScript访问，提高安全性。
• localStorage/sessionStorage: 同样面临XSS攻击的风险，但因为不参与HTTP请求，直接暴露给恶意脚本的风险相对更高。没有HttpOnly这样的保护措施。

示例代码

Cookie 设置和读取

// 设置Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// 读取Cookie
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
console.log(getCookie("username"));

localStorage 和 sessionStorage 使用

// 设置localStorage
localStorage.setItem("username", "Jane Doe");

// 获取localStorage
var username = localStorage.getItem("username");
console.log(username);

// 设置sessionStorage
sessionStorage.setItem("sessionMessage", "This message will disappear when the session ends.");

// 获取sessionStorage
var sessionMessage = sessionStorage.getItem("sessionMessage");
console.log(sessionMessage);