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

定义与用途

  • 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的数据也只能在同一个源下共享。

代码示例

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

设置Cookie

javascript 复制代码
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

javascript 复制代码
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

存储数据

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

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

读取数据

javascript 复制代码
// 读取并打印字符串
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

存储数据

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

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

读取数据

javascript 复制代码
// 读取并打印字符串
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

注意

  • sessionStorage 的数据在页面会话结束时(即浏览器标签页关闭时)会被清除。
  • localStoragesessionStorage 的数据都存储在用户的浏览器中,并且遵循同源策略。
  • 考虑到安全性和隐私性,不应将敏感信息存储在客户端存储中,除非进行了适当的加密和验证。
相关推荐
jessezappy13 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林84340 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css