通过JavaScript本地存储数据
文章目录
- 本地存储
- 本地存储分类 - localStorage
- 本地存储分类 - sessionStorage
- 存储复杂数据类型
- 解决方法
本地存储
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新都不丢失数据
- 容量较大,sessionStorage和localStorage约5M左右
本地存储分类 - localStorage
可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在。
特性:
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
语法:
- 存储/修改数据:
localStorage.setltem(key,value) // 有改无增 - 获取数据:
localStorage.getItem(key) - 删除数据:
localStorage.removeItem(key)
本地存储只能存储字符串类型,非字符串类型会转换成字符串类型存储
本地存储分类 - sessionStorage
特性:
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage相同
存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型。
解决方法
需要将复杂数据类型转换成JSON字符串,再存储到本地。
语法:JSON.stringify(复杂数据类型)
保存时将对象转为JSON字符串:
const obj = {uname: 'lily',age: 19,gender: '女'}localStorage.setItem('obj', JSON.stringify(obj))console.log(typeof localStorage.getItem('obj')) // 返回String,obj存进去是字符串,不是对象// JSON对象的属性和值都有引号,而且统一是双引号
取用时把JSON字符串转换为对象:JSON.parse(localStorage.getItem('obj'))
相关文章:
通过JavaScript本地存储数据
文章目录 本地存储本地存储分类 - localStorage本地存储分类 - sessionStorage存储复杂数据类型解决方法 本地存储 数据存储在用户浏览器中设置、读取方便、甚至页面刷新都不丢失数据容量较大,sessionStorage和localStorage约5M左右 本地存储分类 - localStorage …...
CTF-web-攻防世界-3
1、inget (1)、进入网站,提示传入id值 (2)、用一些闭合方式,返回都一样。 (3)、尝试万能密码。获得flag 2、mfw (1)、页面没有什么特殊的异常,使用dirsearch进行目录扫描,有一些.git文件。看样子是.git文件泄露。 使用githa…...
【附代码案例】深入理解 PyTorch 张量:叶子张量与非叶子张量
在 PyTorch 中,张量是构建神经网络模型的基本元素。了解张量的属性和行为对于深入理解模型的运行机制至关重要。本文将介绍 PyTorch 中的两种重要张量类型:叶子张量和非叶子张量,并探讨它们在反向传播过程中的行为差异。 叶子张量与非叶子张…...
TypeScript 学习笔记(七):TypeScript 与后端框架的结合应用
1. 引言 在前几篇学习笔记中,我们已经探讨了 TypeScript 的基础知识和在前端框架(如 Angular 和 React)中的应用。本篇将重点介绍 TypeScript 在后端开发中的应用,特别是如何与 Node.js 和 Express 结合使用,以构建强类型、可维护的后端应用。 2. TypeScript 与 Node.js…...
Linux基础知识点总结!超详细
Linux 的学习对于一个IT工程师的重要性是不言而喻的,学好它是工程师必备修养之一。 Linux 基础 操作系统 操作系统Operating System简称OS,是软件的一部分,它是硬件基础上的第一层软件,是硬件和其它软件沟通的桥梁。 操作系统…...
中小学校活动怎样投稿给媒体报道宣传?
身为一名学校老师,同时承担起单位活动向媒体投稿的宣传重任,我深知每一次校园活动背后的故事,都承载着师生们的辛勤汗水与教育的无限可能。起初,我满怀着对教育的热情,希望通过文字传递校园的温暖与光芒,却在投稿的道路上遇到了前所未有的挑战。 最初,我选择了最传统的路径——…...
Python代码:十七、生成列表
1、题目 描述: 一串连续的数据用什么记录最合适,牛牛认为在Python中非列表(list)莫属了。现输入牛牛朋友们的名字,请使用list函数与split函数将它们封装成列表,再整个输出列表。 输入描述: …...
C++ 程序的基本要素
一 标识符 程序中变量、类型、函数和标号的名称称标识符。 a,b,name,int,char,main,void等。 系统已有的标识符称为关键字。 常见关键字 using,namespace,void,return; int,float,double,char,bool,signed,unsignex, long,short,const,true,false,sizeof if,else,for,do,whil…...
藏汉翻译工具有哪些?这三款工具简单好用
藏汉翻译工具有哪些?在全球化日益加剧的今天,语言交流成为连接不同文化、促进民族间沟通与理解的重要桥梁。藏汉翻译工具作为推动藏汉文化交流的得力助手,其在促进民族团结、增进相互理解方面的作用愈发凸显。本文将为您盘点市面上主流的藏汉…...
three.js官方案例webgl_loader_fbx.html学习
目录 1.1 添加库引入 1.2 添加必要的组件scene,camera,webrenderer等 1.3 模型加载 1.4 半球光 1.5 动画 1.6 换个自己的fbx模型 1.7 fbx模型和fbx动画关联 1.7 html脚本全部如下 1.8 fbx.js全部脚本如下 1.1 添加库引入 import * as THREE from three; import Stats …...
51单片机-实机演示(单多个数码管)
仿真链接: http://t.csdnimg.cn/QAPhx 目录 一.引脚位置 二.多个显示 三 扩展 一.引脚位置 注意P00 - >A ; 这个多个的在左边,右边的A到B是控制最右边那个单个的. 接下来上显示单个的代码 #include <reg52.h> #include <intrins.h> #define u…...
Pytorch深度学习实践笔记10(b站刘二大人)
🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:pytorch深度学习 🎀CSDN主页 发狂的小花 🌄人生秘诀:学习的本质就是极致重复! 《PyTorch深度学习实践》完结合集_哔哩哔哩_bilibi…...
QT5.15.2及以上版本安装
更新时间:2024-05-20 安装qt5.15以上版本 系统:ubuntu20.04.06 本文安装:linux-5.15.2 下载安装 # 安装编译套件g sudo apt-get install build-essential #安装OpenGL sudo apt-get install libgl1-mesa-dev# 下载qt安装器 https://downl…...
5月27日
思维导图 #include <iostream>using namespace std; namespace st_open {string a1;string retval(string a1);} using namespace st_open; int main() {getline(cin,a1);cout << "逆置前的字符串:" << a1 << endl;a1rerval(a1);…...
python给三维点上色,并添加颜色柱
python的matplotlib库给三维点上色,并添加颜色柱 import numpy as np from pathlib import Path import matplotlib.cm as cm import matplotlib.pyplot as plt# 可视化3d点迹 def Show3D_complete(points3D_result, color_list, save_path):# 指定起止点start_poin…...
Ubuntu22.04之解决:忘记登录密码(二百三十二)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…...
stream-并行流
定义 常规的流都是串行的流并行流就是并发的处理数据,一般要求被处理的数据互相不影响优点:数据多的时候速度更快,缺点:浪费系统资源,数据少的时候开启线程更耗费时间 模版 Stream<Integer> stream1 Stream.of…...
插件“猫抓”使用方法 - 浏览器下载m3u8视频 - 合并 - 视频检测下载 - 网课下载神器
前言 浏览器下载m3u8视频 - 合并 - 网课下载神器 chrome插件-猫抓 https://chrome.zzzmh.cn/info/jfedfbgedapdagkghmgibemcoggfppbb 步骤: P.s. 推荐大佬的学习视频! 《WEB前端大师课》超级棒! https://ke.qq.com/course/5892689#term_id…...
【quarkus系列】构建可执行文件native image
目录 序言为什么选择 Quarkus Native Image?性能优势便捷的云原生部署 搭建项目构建可执行文件方式一:配置GraalVM方式二:容器运行错误示例构建过程分析 创建docker镜像基于可执行文件命令式构建基于dockerfile构建方式一:构建mic…...
linux(ubuntu)常用的代理设置
1. git代理设置与取消 # 设置 git config --global http.proxy socks5://127.0.0.1:1234 git config --global https.proxy socks5://127.0.0.1:1234 # 取消 git config --global --unset http.proxy git config --global --unset https.proxy2. conda代理设置与取消 在.cond…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...
