JS的localStorage和sessionStorage的用法

guanguan0_0

942人浏览 · 2018-07-04 16:06:02

guanguan0_0 · 2018-07-04 16:06:02 发布

sessionStorage（临时存储）：为每个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

localStorage（长期存储）：浏览器关闭后，数据依然会一直存在

*引用类型的值要转换成JSON

1、保存数据到本地存储：

const userInfo = {
    name: '管管',
   age: 18,
};
sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
localStorage.setItem('userInfo', JSON.stringify(userInfo));

2、获取本地存储的数据：

var data1 = JSON.parse(sessionStorage.getItem('userInfo')); 
var data2 = JSON.parse(localStorage.getItem('userInfo'));

3、删除本地存储中的某条数据：

sessionStorage.removeItem('userInfo');
localStorage.removeItem('userInfo');

4、清空本地存储：

sessionStorage.clear();
localStorage.clear();

5、监听本地存储的变化：

*storage发生变化（增删改）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变storage

window.addEventListener('storage', function (e) {     
    console.log('key', e.key);
    console.log('oldValue', e.oldValue);
    console.log('newValue', e.newValue);
    console.log('url', e.url);
})

乐奇 Rokid 开放社区

更多推荐

微安级唤醒、2节干电池直供：CI3422如何重新定义电池供电设备的语音交互

乐奇 Rokid 开放社区

基于 AIUI 框架的眼镜端坐姿监测智能体：WorkerMonitor 设计与实现

基于AIUI框架，设计并实现眼镜端坐姿监测智能体WorkerMonitor。通过加速度传感器实时采集头部姿态数据，结合校准偏移量进行三态分类（正常/警示/异常），每秒采样一次，累计时长并低打扰提醒。每2小时调用LLM生成个性化健康建议，支持自动工作/休息切换与隐藏模式，兼顾隐私与体验。项目采用Ink单文件页面结构，实现极简交互与可持续反馈，为长期伏案者提供无感式颈椎健康管理方案。