当前位置： 首页 > news >正文

20-js本地存储

news 2026/3/31 11:48:09

js本地存储

localStorage

localStorage是window下的对象，可以使用window.localStorage调用，也可以直接使用localStorage调用。

浏览器关闭，localStorage也不会消失

示例：

<body><h2>localStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">读取数据</button><button onclick="deleteData()">删除数据</button><button onclick="clearData()">清空数据</button><script>function saveData() {// 参数1：key，参数2：value// key、value都需要是字符串// localStorage.setItem('msg', 'hello')let person = {name: '张三', age:18}localStorage.setItem('person', JSON.stringify(person));}function readData() {let result = localStorage.getItem('person')console.log(JSON.parse(result))}function deleteData() {localStorage.removeItem('person');}function clearData() {localStorage.clear();}</script>
</body>

sessionStorage

用法和localStorage完全一样。

浏览器关闭后，sessionStorage会消失

<body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">读取数据</button><button onclick="deleteData()">删除数据</button><button onclick="clearData()">清空数据</button><script>function saveData() {// 参数1：key，参数2：value// key、value都需要是字符串// sessionStorage.setItem('msg', 'hello')let person = {name: '张三', age:18}sessionStorage.setItem('person', JSON.stringify(person));}function readData() {let result = sessionStorage.getItem('person')console.log(JSON.parse(result))}function deleteData() {sessionStorage.removeItem('person');}function clearData() {sessionStorage.clear();}</script>
</body>

总结

localStorage、sessionStorage统称为webStorage。

存储内容大小一般支持5MB左右（和浏览器有关）。

浏览器通过Window.sessionStorage、Window.localStorage属性实现本地存储机制。

相关API：

  1. xxxStorage.setItem('key', 'value')：该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
  2. xxxStorage.getItem('person')：该方法接收一个键名作为参数，返回键名对应的值
  3. xxxStorage.removeItem('key')：该方法接收一个键名作为参数，并把该键名从存储中删除
  4. xxxStorage.clear()：该方法会清空存储中的所有数据

sessionStorage存储的内容会随着浏览器窗口关闭而消失。

localStorage存储的内容，需要手动清除才会消失（调用相关API、手工清空浏览器的缓存）。

xxxStorage.getItem(xxx)如果键名对应的value获取不到，那么返回值是null。

JSON.parse(null)的结果也是null

使用本地存储来保存vue中的数据

示例：

<script>
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import MyList from './components/MyList'export default {name: 'App',components: {MyHeader, MyFooter, MyList},data() {return {// todos初始化时，读取浏览器本地存储的todos，如果没有则设置为[]todos: JSON.parse(localStorage.getItem('todos')) || []}},watch: {// 使用监视器监视todos的改变，当todos改变时存入本地存储中，浏览器关闭也不会丢失todos: {handler(value) {localStorage.setItem('todos', JSON.stringify(value));},deep:true}}
}
</script>

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！

相关文章：

20-js本地存储

js本地存储 localStorage localStorage是window下的对象&#xff0c;可以使用window.localStorage调用&#xff0c;也可以直接使用localStorage调用。 浏览器关闭&#xff0c;localStorage也不会消失 示例&#xff1a; <body><h2>localStorage</h2><…...

编程日记 2023/2/22 3:38:38

ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST

1、逻辑流 在屏幕开发中&#xff0c;存在如下逻辑流&#xff1a; PBO&#xff08;Process Before Output&#xff09;&#xff1a;屏幕输出之前触发 PAI&#xff08;Process After Input&#xff09;&#xff1a;用户在屏幕中执行操作触发 POH&#xff08;Process On Help-…...

编程日记 2023/2/22 3:37:31

LeetCode:逆波兰式；

150. 逆波兰表达式求值 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。每个操作数&#xff08;运算对象&#xff09;都可以是一个整…...

编程日记 2023/2/22 3:36:23

为什么阳康后，感觉自己变傻了？

不少人在阳康后出现脑力下降的情况&#xff0c;好像脑子里被雾笼罩。脑雾并不是新名词&#xff0c;已经存在了十几年。以前慢性疲劳综合征患者和脑震荡患者会用它来形容自己的症状。脑雾其实是认知障碍&#xff0c;它可由多种原因引起。比如过度劳累、长期酗酒、缺乏睡眠、久坐…...

编程日记 2023/2/22 3:35:16

考公和大厂40万年薪的offer，选哪个？

眼看毕业将至&#xff0c;相信很多小伙伴已经摩拳擦掌&#xff0c;在为毕业季就业做准备了。2023年高校毕业生规模预计1158万人&#xff0c;同比增加82万人。在资深人力资源服务家汪张明看来&#xff0c;2023年的就业态势不仅是大学毕业生数量有增加&#xff0c;还存在一定的存…...

编程日记 2023/2/22 3:34:06

多线程环境下调用 HttpWebRequest 并发连接限制

.net 的 HttpWebRequest 或者 WebClient 在多线程情况下存在并发连接限制&#xff0c;这个限制在桌面操作系统如 windows xp , windows 7 下默认是2&#xff0c;在服务器操作系统上默认为10. 如果不修改这个并发连接限制&#xff0c;那么客户端同时可以建立的 http 连接数就只有…...

编程日记 2023/2/22 3:32:56

vue3-element-admin搭建

vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 Element Plus 版本的后台管理前端解决方案&#xff0c;是 有来技术团队 继 youlai-mall 全栈开源商城项目的又一开源力作功能清单技术栈清单技术栈 描述官网Vue3 渐进式 JavaScript 框架 https://v3.cn.vuejs.org/Ty…...

编程日记 2023/2/22 3:31:44

蓝海创意云vLive虚拟直播亮相2023昆山元宇宙产品展览会

2月15日-19日&#xff0c;由中国计算机行业协会“元宇宙创见未来”2023元宇宙产品展览会在江苏昆山隆重召开&#xff0c;共吸引了省内外32家企业参展&#xff0c;展出近百款元宇宙产品或技术&#xff0c;涵盖芯片、显示、VR、AR等硬件设备&#xff0c;以及工业、文旅、娱乐、教…...

编程日记 2023/2/22 3:30:37

ThreadLocal线程变量

首先看下ThreadLocal的set()方法存数据的过程&#xff0c;首先获取当前的线程中保持的ThreadLocalMap&#xff0c;每个线程的ThreadLocalMap都是不一样的&#xff0c;因此存储的值是不同的。 public void set(T value) {Thread t Thread.currentThread();ThreadLocalMap map …...

编程日记 2023/2/22 3:29:29

【linux安装redis详解】小白如何安装部署redis，linux安装部署只需5步骤（图文结合，亲测有效）

【写在前面】前端时间接触了一下redis&#xff0c;也是迫于页面查询响应太慢&#xff0c;没办法听说redis这个可持久化内存数据库&#xff0c;于是乎便想着在自己的机器上安装一套&#xff0c;接下来就重点和大家说说怎么从小白开始摸索redis 目录1、下载2、安装2.1 创建文件存…...

编程日记 2023/2/22 3:28:22

2023只会“点点点”,被裁只是时间问题，高薪的自动化测试需要掌握那些技能？

互联网已然是存量市场了&#xff0c;对人员规模的需求正在放缓。在存量市场里&#xff0c;冗余人员和低效人员会被淘汰、被外包。而优秀的人才也会一直受到招聘方的青睐。所以我们就看到了近期行业里冰火两重天的一幕&#xff0c;一边是大量的低端测试工程师被淘汰、求职屡屡碰…...

编程日记 2023/2/22 3:27:16

C语言【柔性数组】

柔性数组&#x1fac5;什么是柔性数组&#x1fac5;柔性数组的使用&#x1fac5;柔性数组的优势&#x1fac5;什么是柔性数组 也许你从来没有听说过柔性数组&#xff08;flexible array&#xff09;这个概念&#xff0c;但是它确实是存在的。 C99 中&#xff0c;结构中的最后一…...

编程日记 2023/2/22 3:26:09

AcWing275. 传纸条

AcWing275. 传纸条小渊和小轩是好朋友也是同班同学&#xff0c;他们在一起总有谈不完的话题。一次素质拓展活动中&#xff0c;班上同学安排坐成一个 m行 n 列的矩阵&#xff0c;而小渊和小轩被安排在矩阵对角线的两端&#xff0c;因此&#xff0c;他们就无法直接交谈了。幸运的…...

编程日记 2023/2/22 3:25:00

圆角矩形的绘制和曲线均匀化

摘要&#xff1a; 圆角矩形是软件 UI 等视觉设计中的常见表达&#xff0c;一种常见的绘制方法是将矩形的四角替换为与边相切的四分之一圆弧&#xff0c;然而这种绘制方式会在连接处产生视觉上的切折感&#xff0c;这是因为圆弧和直线的连接处只满足 G1G^1G1 连续性。本文探究了…...

编程日记 2023/2/22 3:23:49

【Linux】环境变量，命令行参数，main函数三个参数保姆教学

目录 ☃️1.奇奇怪怪的现象和孤儿进程 ☃️2.环境变量 ☃️3.深刻理解main函数的前两个参数和命令行参数 ☃️1.奇奇怪怪的现象和孤儿进程 首先回顾一下之前我们学过的fork&#xff08;&#xff09;创建子进程 fork(void)的返回值有两种 注意fork&#xff08;&#xff09;头…...

编程日记 2023/2/22 3:22:42

美国访问学者生活中有哪些饮食文化特点？

美国的教育毋庸置疑&#xff0c;排在世界数一数二的位置&#xff0c;美食美景更是数不胜数&#xff0c;那么他们有哪些饮食习惯&#xff0c;下面51访学网小编为你们详细介绍这些内容吧。 一、美国饮食文化特点 1、美国的饮食文化体现科学、适度、快捷&#xff0c;以满足人体的…...

编程日记 2023/2/22 3:21:35

RxJava中的Subject

要使用Rxjava首先要导入两个包&#xff0c;其中rxandroid是rxjava在android中的扩展 implementation io.reactivex:rxandroid:1.2.1implementation io.reactivex:rxjava:1.2.0Subject Subject 既可以是一个 Observer 也可以是一个 Observerable&#xff0c;它是连接 Observer 和…...

编程日记 2023/2/22 3:20:25

vue-element-admin在git 上 clone 之后无法install

一. 无法install的原因因为vue-element-admin引入的富文本编辑插件所导致 由于tui-editor变更 名字 导致 依赖查询找不到对应的版本二. 解决的办法先删掉package.json中tui-editor:1.3.3找到 \src\components\MarkdownEditor\index.vue 把所有的import 替换成下面4个import cod…...

编程日记 2023/2/22 3:19:16

Linux线程调度实验

Linux线程调度实验 1.获取线程属性 #include <stdio.h> #include <sys/types.h> #include <unistd.h> #include <pthread.h> #include <time.h> #include <stdlib.h> #include <errno.h> #define _GNU_SOURCE#define handle_error…...

编程日记 2023/2/22 3:18:11

洛谷P5735 【深基7.例1】距离函数 C语言/C++

【深基7.例1】距离函数 题目描述 给出平面坐标上不在一条直线上三个点坐标 (x1,y1),(x2,y2),(x3,y3)(x_1,y_1),(x_2,y_2),(x_3,y_3)(x1​,y1​),(x2​,y2​),(x3​,y3​)&#xff0c;坐标值是实数&#xff0c;且绝对值不超过 100.00&#xff0c;求围成的三角形周长。保留两位…...

编程日记 2023/2/22 3:17:04

ROS2 Humble下，如何用MoveIt! Action接口让机械臂“听话”？一个抓取demo的完整复盘

ROS2 Humble下机械臂精准控制实战&#xff1a;从MoveIt! Action接口到完整抓取任务 在工业自动化和服务机器人领域&#xff0c;机械臂的精准运动控制一直是核心挑战。ROS2 Humble版本中的MoveIt!框架为这一挑战提供了优雅的解决方案&#xff0c;而理解其Action接口的运作机制则…...

编程新知 2026/3/31 9:09:55

PFC5.0代码：含三种矿物组成的岩石或类岩石材料GBM单轴压缩2d算例代码，仅供学习与提升

PFC5.0代码&#xff0c;含三种矿物组成的岩石或者类岩石材料&#xff0c;GBM&#xff0c;单轴压缩2d&#xff0c;算例代码仅供学习以及提升 打开PFC5.0的建模界面&#xff0c;突然想把花岗岩里的石英、长石、云母做成颗粒组合。先整点暴力的——直接拿球体颗粒拼成矿物晶粒&…...

编程新知 2026/3/31 9:01:52

源码级重构与低代码交付：企业级 AI 视频管理平台的二次开发实战

作为一位在安防行业摸爬滚打 10 年的架构师&#xff0c;我经常被集成商朋友的灵魂拷问&#xff1a;“有没有一套代码&#xff0c;既能直接拿去给客户演示&#xff08;低代码&#xff09;&#xff0c;又能让我根据客户需求改得‘面目全非’&#xff08;深度定制&#xff09;&…...

编程新知 2026/3/31 7:17:06

忍者像素绘卷镜像免配置：一键切换‘天界画坊’/‘木叶村’双主题UI

忍者像素绘卷镜像免配置&#xff1a;一键切换天界画坊/木叶村双主题UI 1. 产品概述 忍者像素绘卷是一款专为像素艺术创作者设计的图像生成工作站&#xff0c;基于Z-Image-Turbo深度优化引擎开发。这款工具将传统忍者文化与现代AI技术完美结合&#xff0c;创造出独特的16-Bit复…...

编程新知 2026/3/31 6:42:52

王二明古方草解毒茶商城模式解析

王二明古方草解毒茶商城模式解析&#xff1a;架构、争议与合规思考在社交电商与大健康产业的交叉赛道中&#xff0c;“王二明古方草解毒茶”凭借其独特的草本茶饮定位与多级分销模式&#xff0c;曾一度引发市场关注。该模式以产品为核心&#xff0c;通过数字化商城系统构建了一…...

编程新知 2026/3/31 5:46:27

Cohere Transcribe：20亿参数14语言开源语音识别模型发布

Cohere Transcribe&#xff1a;20亿参数14语言开源语音识别模型发布 【免费下载链接】cohere-transcribe-03-2026 项目地址: https://ai.gitcode.com/hf_mirrors/CohereLabs/cohere-transcribe-03-2026 导语&#xff1a;Cohere正式发布开源语音识别模型Cohere Transcri…...

编程新知 2026/3/31 5:44:26

Phi-3-Mini-128K多轮对话效果实测：复杂任务规划与分解

Phi-3-Mini-128K多轮对话效果实测&#xff1a;复杂任务规划与分解 最近&#xff0c;我花了不少时间深度体验了Phi-3-Mini-128K这款模型。它的名字里带着“128K”&#xff0c;这超长的上下文长度&#xff0c;让我特别好奇它在处理复杂、多轮对话时的真实表现。毕竟&#xff0c;…...

编程新知 2026/3/31 5:30:19

Umi-OCR服务化集成解决方案：将离线OCR能力无缝嵌入你的技术栈

Umi-OCR服务化集成解决方案&#xff1a;将离线OCR能力无缝嵌入你的技术栈 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件&#xff0c;适用于Windows系统&#xff0c;支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitcode.c…...

编程新知 2026/3/31 5:24:12

Phi-4-mini-reasoning实操手册：vLLM日志分析与常见加载失败排障指南

Phi-4-mini-reasoning实操手册&#xff1a;vLLM日志分析与常见加载失败排障指南 1. 模型简介 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族的一员&#xff0c;它经过专门微调以提升数学…...

编程新知 2026/3/31 5:16:09

保姆级教程：在Windows上用VSCode和nRF5340 Audio DK板跑通第一个蓝牙例程

从零开始&#xff1a;WindowsVSCode环境下的nRF5340 Audio DK蓝牙开发实战 在嵌入式开发领域&#xff0c;Nordic Semiconductor的nRF5340 Audio DK开发板因其强大的双核架构和出色的蓝牙音频性能而备受瞩目。但对于刚接触这款开发板的工程师来说&#xff0c;从环境配置到成功运…...

编程新知 2026/3/31 4:56:02