【JavaScript】localStorage

server/2024/11/14 23:04:14/

1. 什么是 localStorage

localStorage 是一个 JavaScript API,允许在浏览器中存储键值对数据。它提供了一个简单的持久性存储方案,数据保存在用户的本地浏览器中,并且在页面刷新或关闭后依然存在。它只能存储字符串类型的数据。

无痕模式下,关闭浏览器,localStorage 中存储的数据也会被清空。

2. 如何使用 localStorage

javascript">// 存储数据
localStorage.setItem('key', 'value');// 获取数据
const value = localStorage.getItem('key');// 删除数据
localStorage.removeItem('key');// 清空所有数据
localStorage.clear();
console.log(localStorage,sessionStorage)
let color = {"c1": "red","c2": "green"
}
// 存储时 都会先转为 string 所以我们如果想要存储复杂类型 需要转 json
localStorage.setItem('color', JSON.stringify(color))
console.log(JSON.parse(localStorage.getItem('color')))

3. localStorage 的容量限制是多少?

每个域名下的 localStorage 都有一定的存储容量限制,通常在 5MB 左右(远大于 cookie 的 4kb)。这个限制是浏览器实现的,不同浏览器可能有略微不同的限制。如果超过了这个限制,浏览器可能会提示用户清理缓存或拒绝继续写入数据(不同浏览器有相应的不同策略)。

4. localStoragesessionStorage 有什么区别?

localStoragesessionStorage 都属于 Web Storage API,但它们有一些关键区别:

  • localStorage 中存储的数据在页面关闭后依然存在,而 sessionStorage 中存储的数据在会话结束(页面关闭)后被清除。
  • localStorage 中的数据可以在同一域名下的任何页面间共享,而 sessionStorage 中的数据只能在同一页面的不同窗口或标签页间共享。

http://www.ppmy.cn/server/18279.html

相关文章

APP开发_ js 控制手机是否显示状态栏

1 Android 控制手机显示或隐藏状态栏的方法 1.1 使用 View 的 setSystemUiVisibility 方法 这个方法允许设置系统 UI 的可见性,包括状态栏。你可以通过组合不同的标志来实现不同的效果。 示例代码: Override protected void onCreate(Bundle saved…

<c++基础(6)>宏定义与函数的区别

最近需要使用openvino封装动态库,其中存在一个问题是openvino和windows.h之间的冲突,其主要是minwaindef.h中的宏定义引起的。所以好奇为什么使用宏定义处理函数过程。 //minwaindef.h中关于min、max的宏定义 #ifndef max #define max(a,b) …

ELK 日志分析系统(二)

一、ELK Kibana 部署 1.1 安装Kibana软件包 #上传软件包 kibana-5.5.1-x86_64.rpm 到/opt目录 cd /opt rpm -ivh kibana-5.5.1-x86_64.rpm 1.2 设置 Kibana 的主配置文件 vim /etc/kibana/kibana.yml --2--取消注释,Kiabana 服务的默认监听端口为5601 server.po…

设计模式之命令模式

一、详细介绍 命令模式是一种行为型设计模式,它将“请求”封装为一个对象,使得使用请求、参数化请求、队列请求、撤销请求、日志请求等多种请求变得简单。命令模式通过将“行为请求者”与“行为实现者”解耦,使得请求的发送者和接收者完全分离…

vue的v-model、v-if、v-for用react语法实现

在React中,没有直接对应于Vue中的v-model、v-if和v-for的指令,但你可以使用React的特性和组件来实现类似的功能。 1. v-model 在Vue中,v-model用于在表单元素和组件之间创建双向数据绑定。在React中,你可以使用受控组件&#xf…

【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面

可以增加自定义方法v-transfer-dom <div v-transfer-dom"true"><Popup v-model"showPopup"><PopupHeader :title"policyloan.docJson.title" /><div class"noticeText"><p v-for"(item, index) in po…

人脸识别开发项目汇总

1.基于FaceX-Zoo实现的人脸识别系统-CSDN博客 2.人脸识别&#xff1a;京东开源FaceX-Zoo&#xff1a;PyTorch工具箱 - 知乎 (zhihu.com) 3.人头识别-人群中准确快速的检测头部算法_在输入图像中检测人像头部的方法-CSDN博客 4.Github开源人脸识别项目face_recognition - 知乎…

SpringBoot:SpringMVC(下)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、RequestBody补充二、PathVariable三.RequestPart:四.ResponseBody五.CookieValue&#xff0c;SessionAttribute&#xff0c;RequestHeader 前言 提示&…