本地存储 cookie sessionStorage 和 localStorage (用法,作用,区别,案例)

相同作用

  • 本地存储保存数据,都存储在浏览器端(客户端)

三者区别

  1. 存储大小

    cookie 数据大小不能超过 4Kb,而 sessionStorage 和 localStorage 一般为 5MB 或更大

  2. 生命周期

    cookie: 默认跟随浏览器关闭而销毁,但可以自己设置过期时间
    sessionStorage: 关闭页面或浏览器时销毁
    localStorage: 一直保存,不会自动销毁,除非手动销毁

  3. 数据与服务器之间的交互

    cookie: 会在每次请求中被携带到服务器端,如果使用cookie保存过多数据会带来性能问题
    sessionStorage 和 localStorage: 只保存浏览器端,不参与服务器通信

  4. 作用域

    sessionStorage: 只能在当前页面有效
    cookie 和 localStorage: 不同页面也会存在

cookie 的用法

// document.cookie='键=值', expires='过期时间'
// 保存
document.cookie = 'username = wq'
// 写一次 就多一个cookie
document.cookie = 'password = 123456'
// 获取  
console.log(document.cookie);
// 取出来是一个字符串形式 'username' = wq ; 'password= 123456'
// 就需要split()拆分处理字符串 获取 username 或者 password

sessionStorage 的用法

<input type="text">
<button class="set">本地存储</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');

// 设置  
set.addEventListener('click', function() {
    var val = ipt.value;
    sessionStorage.setItem('uname', val)
    sessionStorage.setItem('password', val)
});

// 获取
get.addEventListener('click', function() {
    var val = ipt.value;
    console.log(sessionStorage.getItem('uname'));
});

// 删除
remove.addEventListener('click', function() {
    var val = ipt.value;
    sessionStorage.removeItem('uname')
});

// 清除所有
del.addEventListener('click', function() {
    var val = ipt.value;
    sessionStorage.clear()
})

localStorage 的用法

<input type="text">
<button class="set">本地存储</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');

// 设置
set.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.setItem('uname', val)
})

// 获取
get.addEventListener('click', function() {
    var val = ipt.value;
    console.log(localStorage.getItem('uname'));
})

// 删除
remove.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.removeItem('uname')
});

// 清除所有
del.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.clear()
})

记住用户名小案例

<input type="text" id="uname">
<input type="checkbox" id="remember"> 记住用户名
var uname = document.querySelector('#uname')
var remember = document.querySelector('#remember')
if(localStorage.getItem('uname')) {
    uname.value = localStorage.getItem('uname');
    remember.checked = true;
}
remember.addEventListener('change', function() {
    if(this.checked) {
        localStorage.setItem('uname', uname.value)
    } else {
        localStorage.removeItem('uname')
    }
})
### localStoragesessionStorage区别及使用场景 #### 存储容量 `localStorage` `sessionStorage` 都提供了较大的存储空间,通常每域名可存储约5MB的数据[^2]。相比之下,`cookie` 的存储容量较小,单个 `cookie` 大小限制为4KB。 #### 数据生命周期 - **localStorage**: 数据永久保存,除非手动清除或通过 JavaScript 删除。即使浏览器关闭或设备重启,数据仍然存在。 - **sessionStorage**: 数据仅在当前会话期间有效,一旦页面会话结束(通常是关闭标签页),数据会被自动删除。 #### 跨窗口共享能力 - **localStorage**: 支持在同一域名下的多个窗口间共享数据。如果两个窗口打开的是同一网站的不同页面,它们可以通过 `localStorage` 实现数据同步。 - **sessionStorage**: 数据只限于同一个窗口内的不同标签页之间共享,无法跨窗口访问[^1]。 #### API 接口 两者都提供类似的简单键值对操作方法: ```javascript // 设置数据 localStorage.setItem('key', 'value'); sessionStorage.setItem('key', 'value'); // 获取数据 const valueFromLocalStorage = localStorage.getItem('key'); const valueFromSessionStorage = sessionStorage.getItem('key'); // 移除特定数据项 localStorage.removeItem('key'); sessionStorage.removeItem('key'); // 清空所有数据 localStorage.clear(); sessionStorage.clear(); ``` #### 应用场景对比 - **localStorage** - 适合长期存储不需要频繁更改的信息,比如用户的偏好设置、主题模式选择等。 - 可用于构建离线应用程序,在无网络连接的情况下仍能正常运行[^3]。 - **sessionStorage** - 主要应用于短期任务处理中的状态跟踪,例如表单填写过程中防止重复提交或者购物车商品数量计数器等功能[^4]。 - 常见例子还包括登录态验证后的某些一次性标记位管理,像提示框显示逻辑控制等。 --- ### 示例代码展示 以下是基于上述两种技术实现的一个具体案例——记录用户是否首次访问某网页: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Local Storage vs Session Storage</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const isFirstVisitKey = 'isFirstVisit'; let firstTimeUser; if (sessionStorage.getItem(isFirstVisitKey)) { console.log("Not the user's first visit within this session."); } else { firstTimeUser = true; sessionStorage.setItem(isFirstVisitKey, JSON.stringify(firstTimeUser)); alert("Welcome! This is your first time visiting during this browser session!"); } // Persistent storage example with localStorge if (!localStorage.getItem('totalVisits')) { localStorage.setItem('totalVisits', 0); } const visitsCount = parseInt(localStorage.getItem('totalVisits'), 10) + 1; localStorage.setItem('totalVisits', visitsCount.toString()); document.getElementById('visits').textContent = `You have visited ${visitsCount} times.`; }); </script> </head> <body> <p id="visits"></p> </body> </html> ``` 在此示例中,我们利用了 `sessionStorage` 来检测用户在一个浏览会话期内是否为首访者,并借助 `localStorage` 统计总的访问次数并持久化该数值。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温情key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值