【JavaScript】localStorage

news/2024/5/9 19:42:18

1. 什么是 localStorage

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

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

2. 如何使用 localStorage

// 存储数据
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.mrgr.cn/p/15186147

相关文章

imx6ull -- SPI

SPI 是 Motorola 公司推出的一种同步串行接口 技术,是一种高速、全双工的同步通信总线, SPI 时钟频率相比 I2C 要高很多,最高可以工作 在上百 MHz。 SPI 以主从方式工作,通常是有一个主设备和一个或多个从设备,一般 SP…

一个简洁、干净的中后台管理模板

nova-admin —— 一个基于Vue3、Vite5、Typescript、Naive UI, 简洁干净后台管理模板。大家好,我是 Java陈序员。 今天,给大家介绍一个简洁、开源的中后台管理模板项目。关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介…

C语言 switch语句

之前 我们讲了 if 和 嵌套的if分支语句 但其实 多分支语句 我们还可以用 switch 有时 switch 语句可以简化逻辑代码 switch语句也称之为开关语句,其像多路开关一样,使程序控制流程形成多个分支,根据一个表达式的不同取值,选择其…

Git -- 运用总结

文章目录 1. Git2. 基础/查阅2.1 基础/查阅 - git2.2 仓库 - remote2.3 清理 - rm/clean2.4 版本回退 - reset 3. 分支3.1 分支基础 - branch3.2 分支暂存更改 - stash3.3 分支切换 - checkout 4. 代码提交/拉取4.1 代码提交 - push4.2 代码拉取 - pull 1. Git 2. 基础/查阅 2…

JavaFx 错误

最近在使用java fx的table view时遇到了java.lang.IllegalAccessException: module javafx.base cannot access class问题在网站查找后,是因为没有在module-info.java中添加包路径

vmware中安装centos7, 安装redis, 并通过可视化软件(RESP)连接

1. 虚拟机网络问题解决 刚安好的centos可能没有网卡(输入ip a 没有ip地址),此时需要进行如下操作 vi /etc/sysconfig/network-scripts/ifconfig-ens33修改成如下:ONBOOT=yes 然后重启网络服务:service network restart此时重新查看ip a就可以看到ip地址了 在本地ping虚拟机…

线性代数基础3 行列式

行列式 行列式其实在机器学习中用的并不多,一个矩阵必须是方阵,才能计算它的行列式 行列式是把矩阵变成一个标量 import numpy as np A np.array([[1,3],[2,5]]) display(A) print(矩阵A的行列式是:\n,np.linalg.det(A))array([[1, 3],[2, …

【Linux学习】​​学习Linux的准备工作和Linux的基本指令

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

数据结构-树和森林之间的转化

从树的二叉链表的定义可知,任何一棵和树对应的二叉树,其根节点的右子树必为空。这里我们举三个树,将这个由三个树组成的森林组成二叉树是这个样子的。 下面我们说明一下详细过程,首先将每个树转化为二叉的状态,如图所示…

如何使用IDEA直接连接MySQL数据库

如何使用IDEA直接连接MySQL数据库 新建一个空项目打开DataBase窗口连接数据库第一次连接 需要先下载驱动上一步驱动下载太慢怎么办?下载好驱动后 测试连接 新建一个空项目 打开DataBase窗口 连接数据库 第一次连接 需要先下载驱动 如果这里下载的很慢 看下一步解决…

带宽内存服务器爆满,阿里云木马排查过程

服务器的连接数和带宽都暴增,导致项目直接宕机,无法使用的解决方案。 查看服务器实时流量 服务器内执行命令: yum install iftop -y iftop -Pn查看日志,发现服务器在对外访问 .148.232.186 的443端口。 于是设置安全组出方…

spring-securty-oauth2使用例子

oauth2概念 https://www.cnblogs.com/LQBlog/p/16996125.html 环境搭建 1.引入依赖<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-oauth2</artifactId></dependency> 凭证模式package com.…

62、回溯-N皇后

思路&#xff1a; N皇后问题要求在一个nn的棋盘上放置n个皇后&#xff0c;使得它们不能相互攻击。皇后可以攻击同一行、同一列&#xff0c;以及两个对角线方向上的其他皇后。解决这个问题意味着找到所有可能的棋盘配置&#xff0c;每个配置都符合上述条件。 1、初始化数据结构…

C++教学——从入门到精通 11.嵌套循环及数组

上次讲到了循环&#xff0c;这次来讲嵌套循环 如果一个人叫你用C来画一个10*10/2cm^2三角形会么&#xff1f; 这就要用到嵌套循环了 来看看结构&#xff1a; for(变量类型1 变量;条件1;返回值1){语句1;for(变量类型 变量2;条件2;返回值2){语句2;}语句3; } 语句1,2,3是依次…

视频滚动字幕一键批量轻松添加,解锁高效字幕编辑,提升视频质量与观众体验

视频已成为我们获取信息、娱乐休闲的重要渠道。一部成功的视频作品&#xff0c;除了画面精美、音质清晰外&#xff0c;字幕的添加也是至关重要的一环。字幕不仅能增强视频的观感&#xff0c;还能提升信息的传达效率&#xff0c;让观众在享受视觉盛宴的同时&#xff0c;更加深入…

【排课小工具】项目需求的搜集与整合

在小学实习期间(2024年3月1日 - 2024年7月10日),与老师的交流中发现,每当新学期开始都要人工排一次课表,并且这个过程较为繁琐,总是遇到教师课程冲突的状况,一旦发生这种情况,在重排的过程中就会影响到诸多已经排好的项目。如果能够解决上述排课冲突问题,那将会给排课…

实验14-1使用cnn完成MNIST手写体识别(tf)+实验14-2使用cnn完成MNIST手写体识别(keras)

版本python3.7 tensorflow版本为tensorflow-gpu版本2.6 实验14-1使用cnn完成MNIST手写体识别(tf)运行结果: 代码:import tensorflow as tf # Tensorflow提供了一个类来处理MNIST数据 from tensorflow.examples.tutorials.mnist import input_data import time# 载入数据集 mn…

ZYNQ之嵌入式开发04——自定义IP核实现呼吸灯、固化程序

文章目录 自定义IP核——呼吸灯实验固化程序 自定义IP核——呼吸灯实验 Xilinx官方提供了很多IP核&#xff0c;在Vivado的IP Catalog中可以查看这些IP核&#xff0c;在构建自己复杂的系统时&#xff0c;只使用Xilinx官方的免费IP核一般满足不了设计的要求&#xff0c;因此很多…

Android Dalvik虚拟机JNI方法的注册过程分析

Dalvik虚拟机在调用一个成员函数的时候&#xff0c;如果发现该成员函数是一个JNI方法&#xff0c;那么就会直接跳到它的地址去执行。也就是说&#xff0c;JNI方法是直接在本地操作系统上执行的&#xff0c;而不是由Dalvik虚拟机解释器执行。由此也可看出&#xff0c;JNI方法是A…

STM32H750时钟频率和功耗以及RTC功能测试

STM32H750时钟频率和功耗和RTC功能测试 &#x1f4cc;相关篇《STM32H750片外QSPI启动配置简要》 ✨在使用STM32CubeMX修改STM32H750时钟树参数时&#xff0c;如果使用软件自动求解&#xff0c;这是一个非常耗时的操作&#xff0c;有时候还不一定成功&#xff0c;还是推荐使用手…