VUE2使用浏览器缓存的方法

news2024/11/15 23:26:03

分两种:localStorage和sessionStorage,它两统称webStorage

在这里插入图片描述

  1. 注意点1:localStorage对象和sessionStorage对象都是window对象下的,且方法都是一样的,默认”window.”可以省略,添加可用setItem(K,V),查询可用getItem(K),删除可用removeItem(K),清空可用.clear()
  2. 注意点2:本地缓存默认存储都是字符串类型,哪怕存值为数值,最终结果也会转成字符串类型值
  3. 注意点3:查询本地缓存getItem(K),如果查询一个不存在的key值,结果为null,而不是undefine,另外JSON.parse(null),那么结果依然是null,而不是undefine
  4. 注意点4:如果存储值为对象类型,那么页面缓存保存的实际是调用.toString()后的字符串效果,如图,这样坏处是压根不知道对象里面都有啥属性,哪怕获取到该对象也不明白都包含了啥,使用很不方便,而不是咱们认识的json格式
			let p = {name:'张三',age:18}
			function saveData(){			
				localStorage.setItem('person',p)
			}
  1. 注意点5:如果想把对象值[Object
    Object]转为咱们认识的json格式,可使用JSON.stringify(json对象)和JSON.parse([Object
    Object])

let p = {name:‘张三’,age:18}
localStorage.setItem(‘person’,JSON.stringify§)

const result = localStorage.getItem(‘person’)
console.log(JSON.parse(result))

  1. 注意点6:localStorage对象关闭网站也不会清除,而sessionStorage对象关闭网站就都会清楚了
  2. 注意点7:localStorage存储的内容如果清除有2种方式 方式1:调用提供的API清除
    方式2:调用了clear()方法清空整个缓存去清除

写一个简单的针对本地存储增删改查的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

页面新增缓存效果

在这里插入图片描述
页面查询缓存效果在这里插入图片描述
页面删除缓存效果在这里插入图片描述
页面清空缓存效果在这里插入图片描述
sessionStorage方法同localStorage一样

原文地址:

https://blog.csdn.net/a924382407/article/details/124997179

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/141194.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库|scMethBank:单细胞全基因组 DNA 甲基化图谱数据库

甲基化是DNA的一种重要化学修饰&#xff0c;可调节基因的表达和关闭&#xff0c;与癌症、衰老、老年痴呆等许多疾病密切相关&#xff0c;是表观遗传学的重要研究内容之一。测序技术的发展&#xff0c;极大促进了单细胞DNA甲基化研究。然而大量数据的不断积累&#xff0c;对单细…

《HTTP权威指南》----HTTP报文

目录 报文流 报文的组成部分 报文语法 1.起始行 2.首部 通用首部&#xff0c;既可以出现在请求报文中也可以出现在响应报文中。 请求首部&#xff0c;提供更多有关请求的信息。 响应首部&#xff0c;提供更多有关响应的信息。 实体首部&#xff0c;描述主题的长度和内…

2022年,一个技术账号的年终独白,满篇都写着2个字:真难。

2022年&#xff0c;梦想橡皮擦这个账号经历了成长&#xff0c;突破&#xff0c;回归 2023年&#xff0c;适应改变 文章目录序2022年&#xff0c;梦想橡皮擦账号整体汇总原创博客KPI计划与完成总排名KPI计划与完成2022年&#xff0c;橡皮擦获得的荣誉2022年&#xff0c;做技术博…

日志收集系统架构

背景 应用服务器多&#xff0c;日志文件被分散在各个应用服务器上&#xff0c;需要依次登录每台设备才能查看日志&#xff0c;效率低下&#xff0c;且不利于服务器安全管控&#xff0c;加大生产服务器的风险&#xff1b;日志文件不统一&#xff0c;各项目日志没有统一的规范&a…

Python Django教程之实现天气应用程序

基本设置 将目录更改为天气 cd weather启动服务器 python manage.py runserver要检查服务器是否正在运行&#xff0c;请转到 Web 浏览器并输入为 URL。现在&#xff0c;您可以通过按以下命令停止服务器http://127.0.0.1:8000/ ctrl-c 实现 python manage.py startapp main…

Vehicle Speed Forecasting Based On GCN-LSTM Combined Model

GCN-LSTM模型预测道路交通车辆速度 Vehicle Speed Forecasting Based On GCN-LSTM Combined Model Summary This research offers a multistep traffic flow forecasting framework relying on interest spatial-temporal-graph neural network-long short-term memory neura…

【阅读】《MYSQL技术内幕:innodb》索引

概念 索引的类型 聚集索引&#xff1a;叶子节点包含行记录的全部数据辅助索引&#xff1a;叶子节点不包含行记录的全部数据&#xff0c;除了键值以外&#xff0c;还包含指向索引行的书签。 堆表和索引组织表 堆表 无论是主键索引还是普通索引都是辅助索引。数据是按照插入…

​力扣解法汇总2042. 检查句子中的数字是否递增

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 句子是由若干 token 组成的一个列表&#xff0c;token 间用 单个 空格分隔&…

微信小程序实战十五:Https服务搭建及Nginx配置

文章目录 1.最终效果预览2.后端jar包部署及启动3.前端管理系统部署4.Nginx的配置5.https证书申请6.小程序后台中配置子域名这篇文章重点介绍下微信小程序正式版上线前https服务的搭建及配置过程,之前整个流程都操作过,时隔一年再次从零开始操作有些地方的印象已经模糊了,好记…

Java Swing五子棋项目

一、项目简介 本项目为Java Swing五子棋项目&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse 确保可…

ArcGIS基础实验操作100例--实验50以栅格分区裁剪面要素

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验50 以栅格分区裁剪面要素 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff0…

Vulkan PBR与IBL实践

对我来说&#xff0c;每天能过得心情舒畅&#xff0c;有酒喝有美味佳肴吃&#xff0c;必要时工作一会儿&#xff0c;晚上睡得舒舒服服&#xff0c;就行了。 ——迪希亚 序 说实话我已经记不清上一篇文章是什么时候的事情了&#xff0c;感觉得有好几个月了&#xff0c;但其实我…

【Linux】【信号】

文章目录一、信号是什么1.生活中的信号2.什么是Linux信号3.信号处理的常见方式4.Linux当中的信号二、信号的产生1.signal函数2.核心转储3.验证进程等待中的core dump标记位三、信号的系统调用接口1.kill2.raise3.abort四、由软件条件产生信号alarm五、硬件异常产生信号1.除零异…

从编译到可执行,eBPF 加速容器网络的原理分析 | 龙蜥技术

编者按&#xff1a;eBPF(extended Berkeley Packet Filter) 是一种可以在 Linux 内核中运行用户编写的程序&#xff0c;而不需要修改内核代码或加载内核模块的技术。简单说&#xff0c;eBPF 让 Linux 内核变得可编程化了。本文整理自龙蜥大讲堂第 57 期&#xff0c;浪潮信息 SE…

HTML防数据采集

什么是防采集 就是我们想利用爬虫工具采集某个网站的数据&#xff08;前提当然是公开合法数据&#xff09;&#xff0c;但网站不想给你采集而设置的技术阻挡措施。 常见的防止采集方案 利用输入验证码框验证&#xff0c;在采集某些网站过程中&#xff0c;要求你输入验证码&a…

电源特性测试测试哪些方面?电源特性自动测试系统NSAT-8000介绍

假设电源适配器厂家对电源适配器进行了很合理的测试验证工作&#xff0c;那么电源适配器输出的电压应该是个稳定的电源输出。那么对于一些小型设备而言&#xff0c;电源测试就主要测试设备电源端的测试工作。下面纳米软件Namisoft小编将带大家一起看看&#xff0c;关于电源特性…

Android Jetpack Compose——一个简单的笔记APP

一个简单的笔记APP简述效果视频Hilt提供依赖对象Room CRUD接口实现类内容封装查询所有查询删除插入笔记内容效果图ViewModel依赖注入数据初始化数据处理View标题栏排序组件笔记列表新建&编辑笔记效果图ViewModel依赖注入初始化数据处理View背景颜色条标题保存笔记路由导航建…

动态规划 0-1背包问题(滚动数组思想优化)

目录 125 背包问题&#xff08;二&#xff09;LintCode 炼码 0-1背包滚动数组优化 0-1背包问题&#xff08;一&#xff09;LintCode 炼码 【解法一】二维数组 【解法二】滚动数组 125 背包问题&#xff08;二&#xff09;LintCode 炼码 class Solution { public:/*** para…

HADOOP-3.2.2安装

HADOOP-3.2.2安装一. 准备工作二.安装阶段1. 创建安装目录并安装解压包2.修改配置文件core-site.xml3. 修改hdfs-site.xml4. 修改修改yarn-site.xml5.修改workers文件6.修改hadoop-env.sh7.修改mapred-site.xml8.递归创建目录9.分发文件三.运行阶段1.启动hdfs2.启动yarn3.启动j…

F280049C Crossbar X-BAR

文章目录X-BAR9.1 输入X-BAR9.2 ePWM、CLB和GPIO输出X-BAR9.2.1 ePWM X-BAR9.2.1.1 ePWM X-BAR架构9.2.2 CLB X-BAR9.2.2.1 CLB X-BAR架构9.2.3 GPIO输出X-BAR9.2.3.1 GPIO输出X-BAR架构9.2.4 X-BAR标志总结X-BAR 交叉开关&#xff08;在本章中称为X-BAR&#xff09;提供了以各…