Web Storage：数据储存机制

image

前言

  在HTML5之前，开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。在HTML5发布后，提供了一种新的客户端本地保存数据的方法，那就是Web Storage，它也被分为：LocalStorage和SessionStorage，它允许通过JavaScript在Web浏览器中以键值对的形式保存数据。

  Web Storage 是一种在浏览器中存储数据的机制，允许在用户的浏览器中存储数据。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。但它们在数据的生命周期和存储限制上存在一些关键的区别。localStorage是一种持久化存储，即数据在关闭浏览器后也会保留。而 sessionStorage 是一种会话级的存储，即数据在关闭浏览器后会被清除。
Web Storage
localStorage
sessionStorage

  接下来，将会从安全性和用户体验两个方面对SessionStorage和LocalStorage进行评估。然后，将讨论如何根据实际业务要求挑选合适使用的对象。

一、会话存储（sessionStorage）

1.1 什么是sessionStorage

image

  sessionStorage 存储的数据在页面会话（session）期间有效，即只要浏览器窗口（或标签页）是打开的，刷新或者重新进入页面数据依然存在。一旦关闭窗口或标签页，存储的数据就会被删除，重新打开相同的窗口或标签页不会恢复数据。sessionStorage 存放数据大小为一般为5MB，而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

1.2 如何使用sessionStorage

  sessionStorage 可以通过全局的 window 对象访问，因此可以直接使用。

sessionStorage = window.sessionStorage

  我们可以通过检查 window 对象是否包含 sessionStorage 属性，可以确定浏览器是否支持这个对象，如下所示：

function checkStorageSupport() {if (window.sessionStorage) {return true;} else {return false;}
}

  sessionStorage 的属性有Key和Value，保存了大量的数据。我们可以通过 setItem(key, value) 将数据存储到 sessionStorage 中，然后通过 getItem(key) 获取 sessionStorage 中的数据，如下图所示：

image

  这是不免会发现一个问题：存储是对象，为什么value对应的是 [‘object Object’] 呢？这是因为 sessionStorage 只能存储字符串类型，对于复杂对象可以使用ECMAScript对象的 stringify 处理。

sessionStorage.setItem('tg',JSON.stringify(person));

image

  同样在获取数据时，取出的是string类型，如下图所示。这也是sessionStorage只能存储字符串类型，对于复杂对象可以使用ECMAScript对象的 parse 处理。
image

const changeResult = JSON.parse(sessionStorage.getItem('tg'));

image

总之，通过转成字符串的形式存储，取出的时候转成对象，就能正常的存储和读取。

二、本地存储（localStorage）

2.1 什么是localStorage

  localStorage 提供了一种在浏览器中存储持久化数据的方式，即将数据保存到 localStorage 中，以便在刷新页面或重新打开应用后仍然能够访问数据。存储的数据没有时间限制，除非主动删除，否则数据会永久保存在浏览器中。即使关闭浏览器窗口或重新启动浏览器，数据依然存在。存放数据大小为一般为5MB，而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

  LocalStorage 可跨浏览器窗口和选项卡间共享。就是说如果在多个选项卡和窗口中打开了一个应用程序，而一旦在其中一个选项卡或窗口中更新了 LocalStorage，则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。常用于长期登录、判断是否已登录、适合长期保存在本地的数据。

2.2 如何使用 localStorage

  localStorage 可以通过浏览器 window 对象访问，因此可以直接使用，如下所示：

localStorage = window.localStorage;

  我们可以通过检查 window 对象是否包含 localStorage 属性，可以确定浏览器是否支持这个对象，如下所示：

function checkStorageSupport() {if(window.localStorage) {return true;} else {return false;}
}

  在 Vue 项目中，可以使用 window.localStorage 来进行 WebStorage的操作，通过 setItem(key, value) 将数据存储到 localStorage 中，通过 getItem(key) 获取 localStorage 中的数据。

// MyComponent.vue
<template><div>{{ persistedData }}</div><button @click="saveData">Save Data</button>
</template><script>export default {data() {	return {persistedData: ''}},methods: {saveData() {// 保存数据到localStoragelocalStorage.setItem('persistedData', 'Hello World');}},mounted() {// 从localStorage中读取数据this.persistedData = localStorage.getItem('persistedData');}}
</script>

  在这个例子中，我们在mounted钩子函数中读取localStorage中的数据并将其设置到组件的data中的persistedData属性中。同时，在saveData方法中将数据保存到localStorage中。

2.3 注意事项

  • IE8以上版本才支持localStorage这个属性。
  • 目前主流浏览器中都会把localStorage的值类型限定为string类型，这个对我们日常比较常见的JSON对象类型需要一些转换。
  • localStorage在浏览器的隐私模式下不可读取。
  • localStorage本质上是对字符串的读取，如果读取内容多的话会消耗内存空间，导致页面卡。
  • localStorage不会被爬虫爬取到数据

三、其他

3.1 WebStorage 常用API

⚠️注意：注意：sessionStorage和localStorage的用法基本一致，引用类型的值要转换成JSON。

方法说明
setItem(key: string, value: string)保存数据，以键值对的方式储存数据。
也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
getItem(key: string)获取数据，将键值传入，即可获取到对应的value值。
removeItem(key: string)删除单个数据，根据键值移除对应的数据。
clear()删除所有保存的数据
key(index: number)根据位置（从0开始）获得键值

例如：

/*** 存入数据*/
sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");/*** 读取数据*/
var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");/*** 用于清除某个键名对应的数据*/
sessionStorage.removeItem('key');
localStorage.removeItem('key');/*** 用于清除所有保存的数据*/
sessionStorage.clear();
localStorage.clear();/*** 利用length属性和key方法，可以遍历所有的键。*/
for (var i = 0; i < localStorage.length; i++) {console.log(localStorage.key(i));
}

3.2 localStorage 工具类

  这里就不过多阐述了，直接看代码，如下所示：

const prefix = 'one_more_lsc_';/*** 存储数据* @param key 键* @param val 值* @param expires 过期时间，单位为秒*/
export const setItem = (key: string, value: any, expires: number) = >{key = prefix + key;value = JSON.stringify({'val': val,'expires': new Date().getTime() + expires * 1000});window.localStorage.setItem(key, value)
}/*** 读取对应键的值数据* @param key 键* @returns  对应键的值*/
export const getItem = (key: string) : any = >{key = prefix + key;let data = window.localStorage.getItem(key);if (!data) {return null;}data = JSON.parse(data);if (data.expires < new Date().getTime()) {localStorage.removeItem(key);return null;}return data.val;
}/*** 删除指定数据*/
export const removeItem = (key: string) = >{window.localStorage.removeItem(key)
}/*** 删除所有数据*/
export const removeAllItem = () = >{window.localStorage.clear()
}

  再上面代码中，我们实现了惰性删除，即某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。惰性删除已经实现可过期的localStorage缓存，但是也有明显的缺点。如果一个key一直没有被用到，就不会被及时检查，即使过期了也一直存在localStorage。

  针对上述情况，对于不怎么常用 key 实现定时删除，即每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。每隔一秒执行一次定时删除，操作如下：1️⃣ 随机测试20个设置了过期时间的key；2️⃣ 删除所有发现的已过期的key；3️⃣ 若删除的key超过5个则重复步骤1，直到重复500次。

let prefix = 'one_more_lsc_'let list = [];init();
// 每隔一秒执行一次定时删除
window.setInterval(self.check, 1000);/*** 初始化list*/
export const init = () = >{let keys = Object.keys(localStorage);let reg = new RegExp('^' + prefix);let temp = [];//遍历所有localStorage中的所有keyfor (var i = 0; i < keys.length; i++) {//找出可过期缓存的keyif (reg.test(keys[i])) {temp.push(keys[i]);}}list = temp;
}export const check = () = >{if (!list || list.length == 0) {return;}let checkCount = 0;while (checkCount < 500) {let expireCount = 0;// 随机测试20个设置了过期时间的keyfor (let i = 0; i < 20; i++) {if (list.length == 0) {break;}let index = Math.floor(Math.random() * list.length);let key = list[index];let val = localStorage.getItem(list[index]);// 从list中删除被惰性删除的keyif (!val) {list.splice(index, 1);expireCount++;continue;}let = JSON.parse(val);//删除所有发现的已过期的keyif (val.expires < new Date().getTime()) {list.splice(index, 1);localStorage.removeItem(key);expireCount++;}}//若删除的key不超过5个则跳出循环if (expireCount <= 5 || list.length == 0) {break;}checkCount++;}
}

3.3 storage事件

  当储存的数据发生变化时，会触发storage事件，我们可以指定这个事件的回调函数，回调函数接受一个event对象作为参数，如下所示：

window.addEventListener("storage",function(event) {// key：保存发生变化的键名console.log(e.key);// oldValue：更新前的值。如果该键为新增加，则这个属性为null。console.log(e.oldValue);// newValue：更新后的值。如果该键被删除，则这个属性为null。console.log(e.newValue);// url：原始触发storage事件的那个网页的网址。console.log(e.url);
});

image

  值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信。所有浏览器之中，只有IE浏览器除外，它会在所有页面触发storage事件。

四、小结

  在实际项目中，我们需要根据具体的需求来选择合适的数据缓存和本地存储方式。如果只是需要存储少量的数据，可以使用Cookies；如果需要存储大量的数据，并且需要在多个组件或页面之间共享使用，可以使用Vuex进行数据缓存；如果需要将数据持久化存储，可以使用localStorage。需要注意的是，在使用localStorage时要注意对数据进行序列化和反序列化，以保证数据能正确地被存储和读取。

  在Vue项目开发中，数据缓存和本地存储是非常重要的概念。合理使用数据缓存和本地存储可以提升应用程序的性能和用户体验。通过使用Vuex进行数据缓存和使用Cookies或Web Storage进行本地存储，我们可以更好地管理和使用数据。希望本文中的经验和实践对Vue项目的开发有所帮助。

把今天最好的表现当作明天最新的起点……．～

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【QT】常用控件（三）

【QT】常用控件（三）

个人主页~ 常用控件&#xff08;一&#xff09;~ 常用控件&#xff08;二&#xff09;~ QT中其他线程是改变不了GUI上的内容的&#xff0c;只有主线程可以 常用控件 四、显示类控件2、LCD Number3、ProgressBar4、Calendar Widget 五、输入类控件1、Line Edit正则表达式 2、Te…
阅读更多...
【数据处理】大数据入门

【数据处理】大数据入门

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必备知识_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…
阅读更多...
UE小：UE5的Pixelstreaming在捕获画面的时候没办法显示非Viewport的Slate区域按钮的ToolTip

UE小：UE5的Pixelstreaming在捕获画面的时候没办法显示非Viewport的Slate区域按钮的ToolTip

原始代码 首先&#xff0c;让我们看看原始代码片段&#xff1a; // Some widgets might want to provide an alternative Tooltip Handler. if (bCanSpawnNewTooltip || !NewTooltip) {TSharedPtr<SWidget> NewTooltipWidget NewTooltip ? NewTooltip->AsWidget()…
阅读更多...
[含文档+PPT+源码等]精品基于springboot实现的原生微信小程序小区兼职系统

[含文档+PPT+源码等]精品基于springboot实现的原生微信小程序小区兼职系统

基于Spring Boot实现的原生微信小程序小区兼职系统背景&#xff0c;可以从以下几个方面进行阐述&#xff1a; 一、技术背景 移动互联网的普及&#xff1a;随着移动互联网的快速发展&#xff0c;微信小程序作为一种轻量级应用&#xff0c;因其无需下载安装、即用即走的特点&am…
阅读更多...
【Next.js 项目实战系列】02-创建 Issue

【Next.js 项目实战系列】02-创建 Issue

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】01-创建项目 创建 Issue 配置 MySQL 与 Prisma​ 在数据库中可以找到相关内容&…
阅读更多...
Greenhills学习总结

Greenhills学习总结

学习背景&#xff1a;近期参与xx项目过程中&#xff0c;遇到较多的关于代码集成编译的知识盲区&#xff0c;因此需要进行相关知识的学习和扫盲。 参考资料&#xff1a;GreenHills2017.7编译手册:本手册是GreenHills 2017.7.14版编译器的软件使用手册。该手册详细介绍了GreenHi…
阅读更多...
数学中的直觉、联想和抽象漫谈

数学中的直觉、联想和抽象漫谈

数学中的直觉、联想和抽象漫谈 直觉、联想和抽象不是孤立存在的&#xff0c;而是相互交织、共同作用的。构成了我们认知理解世界的不可或缺的三种能力。我们应该重视并培养这些思维能力&#xff0c;以更好地适应不断变化的世界。 在数学的世界里&#xff0c;直觉、联想和抽象是…
阅读更多...
【每日一题】24.10.14 - 24.10.20

【每日一题】24.10.14 - 24.10.20

10.14 直角三角形1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 10.15 回文判定1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 10.16 二次方程1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 10.17 互质1. 题目2. 解题思路3…
阅读更多...
UE5 gameplay学习1 蓝图修改材质和参数

UE5 gameplay学习1 蓝图修改材质和参数

第一种是直接修改这个材质&#xff0c;比较朴素 这个对象直接Set Material这个很直观就设置了 如果要设置材质的属性&#xff0c;就有一点奇怪了&#xff0c;通常来说get到material就能设置了&#xff0c;这里需要如下操作 create一个dynamic material instance 然后还要指定…
阅读更多...
[JAVAEE] 线程安全问题

[JAVAEE] 线程安全问题

目录 一. 什么是线程安全 二. 线程安全问题产生的原因 三. 线程安全问题的解决 3.1 解决修改操作不是原子性的问题 > 加锁 a. 什么是锁 b. 没有加锁时 c. 加锁时 d. 死锁 e. 避免死锁 3.2 解决内存可见性的问题 > volatile关键字 (易变的, 善变的) a. 不加…
阅读更多...
搭建Golang gRPC环境：protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程

搭建Golang gRPC环境：protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程

参考文章&#xff1a; 安装protoc、protoc-gen-go、protoc-gen-go-grpc-CSDN博客 一、简单介绍 本文开发环境&#xff0c;均为 windows 环境&#xff0c;mac 环境其实也类似 ~ ① 编译proto文件&#xff0c;相关插件 简单介绍&#xff1a; protoc 是编译器&#xff0c;用于将…
阅读更多...
AUTOSAR_EXP_ARAComAPI的5章笔记（17）

AUTOSAR_EXP_ARAComAPI的5章笔记（17）

☞返回总目录 相关总结&#xff1a;AutoSar AP CM通信组总结 5.7 通信组 5.7.1 目标 通信组&#xff08;Communication Group&#xff0c;CG&#xff09;是由 AUTOSAR 定义的复合服务模板。它提供了一个通信框架&#xff0c;允许在 AUTOSAR 应用程序之间以对等方式和广播模…
阅读更多...
AMBA-CHI协议详解（十）

AMBA-CHI协议详解（十）

AMBA-CHI协议详解&#xff08;一&#xff09;- Introduction AMBA-CHI协议详解&#xff08;二&#xff09;- Channel fields / Read transactions AMBA-CHI协议详解&#xff08;三&#xff09;- Write transactions AMBA-CHI协议详解&#xff08;四&#xff09;- Other transac…
阅读更多...
【设计模式系列】抽象工厂模式

【设计模式系列】抽象工厂模式

一、什么是抽象工厂模式 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一个接口&#xff0c;用于创建一系列相关或相互依赖的对象&#xff0c;而无需指定它们具体的类。这种模式允许客户端使用抽象的接口来创建一组…
阅读更多...
一小时快速入门Android GPU Inspector

一小时快速入门Android GPU Inspector

本文介绍如何使用 Android GPU Inspector (AGI) 对Android 应用进行系统性能分析和帧性能分析 。面向熟悉Android图形的开发者。 待分析应用需要的前置条件 (1) 将应用设置为可调试状态 <application [...] android:debuggable"true">&#xff08;2&#xff09…
阅读更多...
LabVIEW水质监测系统

LabVIEW水质监测系统

在面对全球性的海洋污染问题时&#xff0c;利用先进技术进行水质监测成为了保护海洋环境的关键手段之一。开发了一种基于LabVIEW的海洋浮标水质监测系统&#xff0c;该系统能够实时监测并评估近海水域的水质状况&#xff0c;旨在为海洋保护和污染防治提供科技支持。 项目背景 …
阅读更多...
svn-拉取与更新代码

svn-拉取与更新代码

右键项目文件 进行更新与提交代码&#xff0c;提交代码选择更改的文件以及填写commit
阅读更多...
电子部授课1

电子部授课1

今天下午有院科协的授课&#xff0c;涉及电赛知识&#xff0c;单片机环境构建和模拟方向讲解。感觉要学知识还是很多呜呜呜 这是电赛讲解&#xff0c;主要是五个方面&#xff0c;有一个讲太快了没有听清哈哈哈 后面是全程搜概念的模拟&#xff0c;真的有很多知识不太明白 慌乱…
阅读更多...
Java项目-基于springboot框架的会员制医疗预约服务管理信息系统项目实战(附源码+文档)

Java项目-基于springboot框架的会员制医疗预约服务管理信息系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…
阅读更多...
云曦10月13日awd复现

云曦10月13日awd复现

一、防御 1、改用户密码 passwd <user> 2、改数据库密码 进入数据库 mysql -uroot -proot 改密码 update mysql.user set passwordpassword(新密码) where userroot; 查看用户信息密码 select host,user,password from mysql.user; 改配置文件&#xff0c;将密码改为自己…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023