JavaScript--WebStorage
目录
WebStorage概述
WebStorage分类
注意:
localStorage方法
介绍:
常见方法:
案例演示:
sessionStorage方法
介绍:
常见方法:
案例演示:
WebStorage概述
WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案,浏览器兼容的本地存储方案只有使用Cookie。有同学可能会问,既然有了Cookie本地存储,为什么还要引入WebStorage的概念?与Cookie相比,WebStorage有以下几点优势:
-
容量:Cookie的存储容量较小,通常为几KB,而WebStorage可以存储更大容量的数据,一般为几MB。
-
服务器端交互:Cookie在每个HTTP请求中都会发送到服务器端,增加了网络流量。而WebStorage不会随每个请求发送到服务器,仅在客户端进行数据存储。
-
生命周期:Cookie有过期时间,可以设置为长久保存或在指定时间后过期删除。而sessionStorage仅在当前会话期间有效,关闭浏览器后数据将被清除;localStorage数据则会永久保存。
-
访问性能:从访问性能的角度看,Cookie需要在HTTP请求和响应中携带数据,会增加数据传输的开销;而WebStorage可以在客户端直接操作,读写速度更快。
-
安全性:Cookie存储的数据在每次请求中都会被发送到服务器端,安全性稍低;而WebStorage数据存储在浏览器端,只有对应网站的JavaScript代码才能访问,相对安全。
虽然WebStorage是HTML5新增的本地存储解决方案之一,但并不是为了取代Cookie而制定的标准,Cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的,session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该Cookie做,却不得不用Cookie的本地存储的应用场景。
WebStorage分类
JavaScript中的WebStorage是一种用于在Web浏览器中存储数据的API。它提供了两个主要的对象:sessionStorage和localStorage。
- sessionStorage对象用于在单个会话期间存储数据。当用户关闭浏览器标签页或窗口时,sessionStorage中的数据将被清除。
- localStorage对象用于永久性地存储数据,即使用户关闭浏览器标签页或窗口,数据也会被保留下来。
注意:
localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理,低版本IE可以使用json2.js。
localStorage方法
介绍:
localStorage是Web浏览器提供的一种本地存储机制,用于在浏览器中永久性地存储数据。它与 sessionStorage 类似,但 localStorage 的数据不会随着页面关闭而消失。
常见方法:
- 保存单个数据:使用 localStorage.setItem(key, value) 方法可以将指定的键值对存储到 localStorage 中。其中,key 是数据的键,value 是要保存的数据值。
- 读取单个数据:使用 localStorage.getItem(key) 方法可以根据指定的键从 localStorage 中获取相应的数据值。传入键名 key,即可返回对应的值。
- 删除单个数据:使用 localStorage.removeItem(key) 方法可以从 localStorage 中删除指定键的数据。传入要删除的键名 key 即可删除对应的数据。
- 删除所有数据:使用 localStorage.clear() 方法可以从 localStorage 中删除所有保存的数据。调用该方法后,localStorage 将被清空,所有的键值对都将被删除。
- 获取某个索引的键名:使用 localStorage.key(index) 方法可以根据索引获取对应位置的键名。传入索引 index,返回该位置上的键名。
案例演示:
<!DOCTYPE html>
<html>
<head><title>待办事项列表</title><script>// 初始化任务列表if (localStorage.getItem('tasks') === null) {localStorage.setItem('tasks', JSON.stringify([]));}function addTask() {var taskInput = document.getElementById('taskInput');var task = taskInput.value;if (task.trim() !== '') {var tasks = JSON.parse(localStorage.getItem('tasks'));tasks.push(task);localStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();taskInput.value = '';}}function removeTask(index) {var tasks = JSON.parse(localStorage.getItem('tasks'));tasks.splice(index, 1);localStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();}function displayTasks() {var tasks = JSON.parse(localStorage.getItem('tasks'));var taskList = document.getElementById('taskList');taskList.innerHTML = '';for (var i = 0; i < tasks.length; i++) {var taskItem = document.createElement('li');var taskText = document.createTextNode(tasks[i] + " ");var removeBtn = document.createElement('button');removeBtn.setAttribute('onclick', 'removeTask(' + i + ')');removeBtn.textContent = '删除';taskItem.appendChild(taskText);taskItem.appendChild(removeBtn);taskList.appendChild(taskItem);}}</script>
</head>
<body><h1>待办事项列表</h1><input type="text" id="taskInput" placeholder="输入任务"><button onclick="addTask()">添加任务</button><ul id="taskList"></ul><script>displayTasks();</script>
</body>
</html>
这个HTML页面创建了一个简单的待办事项列表应用。通过输入任务并点击"添加任务"按钮,可以将任务添加到localStorage中,并在页面上显示出来。每个任务都带有一个"删除"按钮,点击该按钮可以从任务列表中删除相应的任务。
该应用基于localStorage存储任务列表数据,当页面被加载时,会从localStorage中读取任务数据,并在页面上显示出来。添加任务、删除任务操作会同步更新localStorage中的数据,并重新呈现更新后的任务列表。
sessionStorage方法
介绍:
sessionStorage对象的确用于存储特定于某个对话的数据,其生命周期与当前窗口或标签页相关联。当窗口或标签页关闭时,通过sessionStorage存储的数据将被清空。
另外,存储在sessionStorage中的数据是可以跨越页面刷新而存在的。在某些情况下,如果浏览器支持,并且在浏览器崩溃并重新启动后,也可以继续使用先前存储的数据。这种支持在Firefox和WebKit中是同步写入的,所以添加到存储空间中的数据会立即提交。但是,在IE中,写入操作是异步的,因此设置数据和将数据实际写入磁盘之间可能会有一些延迟。
需要注意的是,sessionStorage对象是绑定于特定的服务器会话的,因此存储在sessionStorage中的数据只能由最初设置数据的页面访问。而且,对于多页面应用程序存在一定的限制,无法跨多个页面直接访问sessionStorage中的数据。
常见方法:
- 保存单个数据:使用 sessionStorage.setItem(key, value) 方法可以将指定的键值对存储到 sessionStorage 中。其中,key 是数据的键,value 是要保存的数据值。
- 读取单个数据:使用 sessionStorage.getItem(key) 方法可以根据指定的键从 sessionStorage 中获取相应的数据值。传入键名 key,即可返回对应的值。
- 删除单个数据:使用 sessionStorage.removeItem(key) 方法可以从 sessionStorage 中删除指定键的数据。传入要删除的键名 key 即可删除对应的数据。
- 清空所有数据:使用 sessionStorage.clear() 方法可以从 sessionStorage 中删除所有保存的数据。调用该方法后,sessionStorage 将被清空,所有的键值对都将被删除。
- 获取某个索引的键名:使用 sessionStorage.key(index) 方法可以根据索引获取对应位置的键名。传入索引 index,返回该位置上的键名。
案例演示:
下面是将localStorage的版本代码修改为使用 sessionStorage 的版本:
<!DOCTYPE html>
<html>
<head><title>待办事项列表</title><script>// 初始化任务列表if (sessionStorage.getItem('tasks') === null) {sessionStorage.setItem('tasks', JSON.stringify([]));}function addTask() {var taskInput = document.getElementById('taskInput');var task = taskInput.value;if (task.trim() !== '') {var tasks = JSON.parse(sessionStorage.getItem('tasks'));tasks.push(task);sessionStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();taskInput.value = '';}}function removeTask(index) {var tasks = JSON.parse(sessionStorage.getItem('tasks'));tasks.splice(index, 1);sessionStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();}function displayTasks() {var tasks = JSON.parse(sessionStorage.getItem('tasks'));var taskList = document.getElementById('taskList');taskList.innerHTML = '';for (var i = 0; i < tasks.length; i++) {var taskItem = document.createElement('li');var taskText = document.createTextNode(tasks[i] + " ");var removeBtn = document.createElement('button');removeBtn.setAttribute('onclick', 'removeTask(' + i + ')');removeBtn.textContent = '删除';taskItem.appendChild(taskText);taskItem.appendChild(removeBtn);taskList.appendChild(taskItem);}}</script>
</head>
<body><h1>待办事项列表</h1><input type="text" id="taskInput" placeholder="输入任务"><button onclick="addTask()">添加任务</button><ul id="taskList"></ul><script>displayTasks();</script>
</body>
</html>
与localStorage的版本不同,这次我们使用 sessionStorage 来存储任务列表数据。在代码中,所有出现 localStorage 的地方都被替换为 sessionStorage。
sessionStorage 提供了一个与 localStorage 类似的接口,用于在会话期间保存数据。与 localStorage 不同,sessionStorage 中存储的数据在会话结束后将会被清除。因此,在关闭浏览器标签或窗口之后,数据将会丢失。
相关文章:
JavaScript--WebStorage
目录 WebStorage概述 WebStorage分类 注意: localStorage方法 介绍: 常见方法: 案例演示: sessionStorage方法 介绍: 常见方法: 案例演示: WebStorage概述 WebStorage是HTML5中…...
elementui 的 dialog 常用逻辑总结
菜鸟最近写后台管理系统,发现不管是弹窗、还是编辑、查看、添加等功能,真的代码都差不多,但是每次都要重新写里面的关闭逻辑等,菜鸟就感觉不如搞一个模版,后面只关注于逻辑,其他都直接来这里复制了…...

ip网络广播系统网络音频解码终端公共广播SV-7101
SV-7101V网络音频终端产品简介 网络广播终端SV-7101V,接收网络音频流,实时解码播放。本设备只有网络广播功能,是一款简单的网络广播终端。提供一路线路输出接功放或有源音箱。 产品特点 ■ 提供固件网络远程升级■ 标准RJ45网络接口&…...

【Winform学习笔记(七)】Winform无边框窗体拖动功能
Winform无边框窗体拖动功能 前言正文1、设置无边框模式2、无边框窗体拖动方法1、通过Panel控件实现窗体移动2、通过窗体事件实现窗体移动3、调用系统API实现窗体移动4、重写WndProc()实现窗体移动 前言 在本文中主要介绍 如何将窗体设置成无边框模式、以及实现无边框窗体拖动功…...

【Nginx】静态资源部署、反向代理、负载均衡
个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ nginx静态资源部署、反向代理、负载均衡 &…...

二、框架篇
框架篇 Spring 1. 基础核心技术 第1章-Spring的模块与应用场景 第2章-Spring基于XML配置的容器 第3章-Spring基于注解配置的容器 第4章-Spring基于Java配置的容器 第5章-Spring三种配置方式的混合和迁移 第6章-Spring同类型多个Bean的注入 第7章-Spring的Bean生命周期…...

[LitCTF 2023]Http pro max plus
打开环境后提示说,只允许在本地访问,本地访问,还是想到了XFF字段 好家伙的,直接被嘲讽,还是了解太少了,都不知道还有没有其他方式可以控制ip地址信息 经过查看wp,得知一种新的方式 Client-IP …...
科技的成就(四十九)
381、机器人 Unimate 诞生 "1961 年,第一款工业机器人 Unimate 诞生。工程师恩格尔伯格受阿西莫夫小说《我,机器人》影响,与发明家德沃尔成立了 Unimation。1961 年,公司的第一台机器 人 Unimate 开始在通用电气新泽西工厂试…...

地理信息系统空间分析实验教程 第三版 第八章示例与练习 学校选址
学校选址 背景 合理的学校空间位置布局有利于学生的上课与生活。学校的选址问题需要考虑地理 E八位置、学生娱乐场所配套设施、与现有学校的距离等因素,从总体上把握这些国素能够确定出适宜性比较好的学校选址区 目的 通过练习,熟悉 ArcGIS 栅格数据…...

opencv35-形态学操作-腐蚀cv2.erode()
形态学,即数学形态学(Mathematical Morphology),是图像处理过程中一个非常重要的研 究方向。形态学主要从图像内提取分量信息,该分量信息通常对于表达和描绘图像的形状具有 重要意义,通常是图像理解时所使用…...

数据结构之栈和队列---c++
栈和队列的简单介绍 栈 栈是一个“先进后出”结构 队列 入队演示 队列是一种“先进先出”的结构 出队演示 接下来我们开始本次的内容 栈实现队列 分析 1.我们可以老老实实的写一个栈然后将所有的接口函数实现出来,最后再进行实现队列,但是显然…...
《网约车运营数据分析实战》学习笔记
这篇文章整理自 接地气的陈老师 x 和鲸社区 | 网约车运营分析 数据分析实战活动业务讲解会【接地气的陈老师】的讲解 活动介绍 假设你是某打车APP的商业数据分析师,为某大区提供日常数据报表。现在大区领导表示:希望你从日常数据监测中,发现…...
PostgreSQL常用函数
PostgreSQL常用函数 内置函数 PostgreSQL 内置函数也称为聚合函数,用于对字符串或数字数据执行处理。 下面是所有通用 PostgreSQL 内置函数的列表: COUNT 函数:用于计算数据库表中的行数。MAX 函数:用于查询某一特定列中最大值…...

决策树和随机森林对比
1.用accuracy来对比 # -*-coding:utf-8-*-""" accuracy来对比决策树和随机森林 """ from sklearn.tree import DecisionTreeClassifier from sklearn.ensemble import RandomForestClassifier from sklearn.datasets import load_wine#(178, 13…...

CS 144 Lab Seven -- putting it all together
CS 144 Lab Seven -- putting it all together 引言测试lab7.ccUDPSocketNetworkInterfaceAdapterTCPSocketLab7main方法子线程 小结 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Six 对应的PDF: Checkpoint 6: putting it all together 引言 本实验无需进行任何编…...

opencv基础-29 Otsu 处理(图像分割)
Otsu 处理 Otsu 处理是一种用于图像分割的方法,旨在自动找到一个阈值,将图像分成两个类别:前景和背景。这种方法最初由日本学者大津展之(Nobuyuki Otsu)在 1979 年提出 在 Otsu 处理中,我们通过最小化类别内…...
gcc-buildroot-9.3.0 和 gcc-arm-10.3 的区别
gcc-buildroot-9.3.0 和 gcc-arm-10.3 是两个不同的 GCC (GNU Compiler Collection) 版本,主要用于编译 C、C 和其他语言的程序。它们之间的区别主要体现在以下几个方面: 版本号:gcc-buildroot-9.3.0 对应的是 GCC 9.3.0 版本,而 …...

IDEA Run SpringBoot程序步骤原理
这个文章不是高深的原理文章,仅仅是接手一个外部提供的阉割版代码遇到过的一个坑,后来解决了,记录一下。 1、IDEA Run 一个SpringBoot一直失败,提示找不到类,但是maven install成功,并且java -jar能成功ru…...

海康威视摄像头配置RTSP协议访问、onvif协议接入、二次开发SDK接入
一、准备工作 (1)拿到摄像头之后,将摄像头电源线插好,再将网线插入到路由器上。 (2)将自己的笔记本电脑也连接到路由器网络,与摄像头出在同一个局域网。 二、配置摄像头 2.1 激活方式选择 第一次使用设备需要激活,在进行配置。 最简单,最方便的方式是选择浏览器激…...
Android中的Parcelable 接口
Android中的Parcelable 接口 在Android中,Parcelable接口是用于实现对象序列化和反序列化的一种机制。它允许我们将自定义的Java对象转换成一个可传输的二进制数据流,以便在不同组件之间传递数据。通常在Activity之间传递复杂的自定义对象时,…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...

全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...

Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...