当前位置：首页 > article >正文

前端中常见的三种存储方式Cookie、localStorage 和 sessionStorage。

article 2024/11/13 15:28:46

1. Cookie

定义与用途：

Cookie 是一小段存储在客户端（浏览器）的数据，每次HTTP请求时，浏览器会自动将Cookie附加到请求头中发送给服务器。
它主要用于会话状态管理（如用户登录状态、购物车信息）、个性化设置（如用户自定义设置、主题等）以及浏览器行为跟踪（如分析用户行为）。

特点：

兼容性好：几乎所有浏览器都支持Cookie。
容量有限：每个Cookie的大小通常限制在4KB左右，并且每个域名下的Cookie数量也有限制（一般为20个）。
自动发送：每次HTTP请求都会自动携带Cookie，这可能会增加网络开销。
安全性问题：存储在客户端，数据容易被篡改，且存在CSRF（跨站请求伪造）等安全风险。

2. localStorage

定义与用途：

localStorage 是HTML5提供的一种Web存储API，允许网站在用户的浏览器中存储数据，且没有过期时间（除非手动删除）。
它主要用于持久化存储用户数据，如用户偏好设置、游戏进度等。

特点：

操作方便：以键值对的形式存储数据，API简单易用。
容量较大：相比Cookie，localStorage的容量要大得多，一般为5MB左右。
持久性：数据存储在浏览器中，不会随会话结束而清除，除非用户手动清除或浏览器数据被删除。
同源策略：localStorage的数据只能在同一个源（协议+域名+端口）下共享。

3. sessionStorage

定义与用途：

sessionStorage 与localStorage类似，也是HTML5提供的一种Web存储API，但它仅在当前会话（浏览器标签页）中有效。
它主要用于存储与当前会话相关的数据，如页面加载次数、表单数据等。

特点：

会话级别：数据仅在当前会话中有效，会话结束时（浏览器标签页关闭）数据会被清除。
操作方式与localStorage相同：同样以键值对的形式存储数据，API简单易用。
同源策略：与localStorage相同，sessionStorage的数据也只能在同一个源下共享。

代码示例

1. Cookie

由于Cookie主要通过HTTP响应头来设置，并且浏览器会自动在后续的请求中携带它们，因此直接在JavaScript中设置Cookie需要一些额外的步骤。这里我们使用一个简单的函数来设置和读取Cookie。

设置Cookie：

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// 使用示例
setCookie('username', 'JohnDoe', 7); // 设置一个名为'username'的Cookie，值为'JohnDoe'，有效期7天

读取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;
}

// 使用示例
var username = getCookie('username');
console.log(username); // 输出: JohnDoe

2. localStorage

存储数据：

// 存储一个字符串
localStorage.setItem('greeting', 'Hello, World!');

// 存储一个对象（需要先转换为字符串）
var user = { name: 'JohnDoe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

读取数据：

// 读取并打印字符串
var greeting = localStorage.getItem('greeting');
console.log(greeting); // 输出: Hello, World!

// 读取并解析对象
var userJson = localStorage.getItem('user');
var user = JSON.parse(userJson);
console.log(user.name); // 输出: JohnDoe

3. sessionStorage

存储数据：

// 存储一个字符串
sessionStorage.setItem('sessionGreeting', 'Welcome to the session!');

// 存储一个对象（需要先转换为字符串）
var sessionUser = { name: 'JaneDoe', age: 25 };
sessionStorage.setItem('sessionUser', JSON.stringify(sessionUser));

读取数据：

// 读取并打印字符串
var sessionGreeting = sessionStorage.getItem('sessionGreeting');
console.log(sessionGreeting); // 输出: Welcome to the session!

// 读取并解析对象
var sessionUserJson = sessionStorage.getItem('sessionUser');
var sessionUser = JSON.parse(sessionUserJson);
console.log(sessionUser.name); // 输出: JaneDoe