前端中常见的三种存储方式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 的数据都存储在用户的浏览器中,并且遵循同源策略。
  • 考虑到安全性和隐私性,不应将敏感信息存储在客户端存储中,除非进行了适当的加密和验证。
相关推荐
qq_3901617728 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js