JavaScript--WebStorage

目录

WebStorage概述 

WebStorage分类 

注意：

localStorage方法

介绍：

常见方法：

案例演示： 

sessionStorage方法

介绍：

常见方法：

案例演示： 

WebStorage概述 

WebStorage是HTML5中本地存储的解决方案之一，在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案，浏览器兼容的本地存储方案只有使用Cookie。有同学可能会问，既然有了Cookie本地存储，为什么还要引入WebStorage的概念？与Cookie相比，WebStorage有以下几点优势：

  1. 容量：Cookie的存储容量较小，通常为几KB，而WebStorage可以存储更大容量的数据，一般为几MB。

  2. 服务器端交互：Cookie在每个HTTP请求中都会发送到服务器端，增加了网络流量。而WebStorage不会随每个请求发送到服务器，仅在客户端进行数据存储。

  3. 生命周期：Cookie有过期时间，可以设置为长久保存或在指定时间后过期删除。而sessionStorage仅在当前会话期间有效，关闭浏览器后数据将被清除；localStorage数据则会永久保存。

  4. 访问性能：从访问性能的角度看，Cookie需要在HTTP请求和响应中携带数据，会增加数据传输的开销；而WebStorage可以在客户端直接操作，读写速度更快。

  5. 安全性：Cookie存储的数据在每次请求中都会被发送到服务器端，安全性稍低；而WebStorage数据存储在浏览器端，只有对应网站的JavaScript代码才能访问，相对安全。

虽然WebStorage是HTML5新增的本地存储解决方案之一，但并不是为了取代Cookie而制定的标准，Cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该Cookie做，却不得不用Cookie的本地存储的应用场景。

WebStorage分类 

JavaScript中的WebStorage是一种用于在Web浏览器中存储数据的API。它提供了两个主要的对象：sessionStorage和localStorage。

  1. sessionStorage对象用于在单个会话期间存储数据。当用户关闭浏览器标签页或窗口时，sessionStorage中的数据将被清除。
  2. localStorage对象用于永久性地存储数据，即使用户关闭浏览器标签页或窗口，数据也会被保留下来。

注意：

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js。

localStorage方法

介绍：

localStorage是Web浏览器提供的一种本地存储机制，用于在浏览器中永久性地存储数据。它与 sessionStorage 类似，但 localStorage 的数据不会随着页面关闭而消失。

常见方法：

  1. 保存单个数据：使用 localStorage.setItem(key, value) 方法可以将指定的键值对存储到 localStorage 中。其中，key 是数据的键，value 是要保存的数据值。
  2. 读取单个数据：使用 localStorage.getItem(key) 方法可以根据指定的键从 localStorage 中获取相应的数据值。传入键名 key，即可返回对应的值。
  3. 删除单个数据：使用 localStorage.removeItem(key) 方法可以从 localStorage 中删除指定键的数据。传入要删除的键名 key 即可删除对应的数据。
  4. 删除所有数据：使用 localStorage.clear() 方法可以从 localStorage 中删除所有保存的数据。调用该方法后，localStorage 将被清空，所有的键值对都将被删除。
  5. 获取某个索引的键名：使用 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中的数据。

常见方法：

  1. 保存单个数据：使用 sessionStorage.setItem(key, value) 方法可以将指定的键值对存储到 sessionStorage 中。其中，key 是数据的键，value 是要保存的数据值。
  2. 读取单个数据：使用 sessionStorage.getItem(key) 方法可以根据指定的键从 sessionStorage 中获取相应的数据值。传入键名 key，即可返回对应的值。
  3. 删除单个数据：使用 sessionStorage.removeItem(key) 方法可以从 sessionStorage 中删除指定键的数据。传入要删除的键名 key 即可删除对应的数据。
  4. 清空所有数据：使用 sessionStorage.clear() 方法可以从 sessionStorage 中删除所有保存的数据。调用该方法后，sessionStorage 将被清空，所有的键值对都将被删除。
  5. 获取某个索引的键名：使用 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 中存储的数据在会话结束后将会被清除。因此，在关闭浏览器标签或窗口之后，数据将会丢失。

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

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

相关文章

uni-app:实现数字文本框，以及左右加减按钮

uni-app:实现数字文本框，以及左右加减按钮

效果 代码 <template><view><view classline3><view classline3_position><view classleft>数量<text>*</text></view> <view class"right"><view class"quantity_btn"><view class"…
阅读更多...
Mysql存储引擎InnoDB

Mysql存储引擎InnoDB

一、存储引擎的简介 MySQL 5.7 支持的存储引擎有 InnoDB、MyISAM、Memory、Merge、Archive、Federated、CSV、BLACKHOLE 等。 1、InnoDB存储引擎 从MySQL5.5版本之后&#xff0c;默认内置存储引擎是InnoDB&#xff0c;主要特点有&#xff1a; &#xff08;1&#xff09;灾难恢…
阅读更多...
git 如何切换到远程分支(remote)分支

git 如何切换到远程分支(remote)分支

要切换到远程分支&#xff0c;你可以按照以下步骤操作&#xff1a; 首先&#xff0c;使用git branch -r命令查看可用的远程分支列表。 选择你要切换到的远程分支&#xff0c;然后使用以下命令创建并切换到一个新的本地分支&#xff1a; git checkout -b <branch_name> o…
阅读更多...
Docker入门——保姆级

Docker入门——保姆级

Docker概述 ​ —— Notes from WAX through KuangShen 准确来说&#xff0c;这是一篇学习笔记&#xff01;&#xff01;&#xff01; Docker为什么出现 一款产品&#xff1a;开发—上线 两套环境&#xff01;应用环境如何铜鼓&#xff1f; 开发 – 运维。避免“在我的电脑…
阅读更多...
理解和使用Ansible模块，简化自动化任务

理解和使用Ansible模块，简化自动化任务

Ansible是一款强大的自动化工具&#xff0c;用于管理和配置IT基础设施。在Ansible的世界中&#xff0c;模块&#xff08;Module&#xff09;是至关重要的组成部分。本文将深入探讨Ansible模块&#xff0c;了解它们如何简化自动化任务的执行过程。 Ansible模块是Ansible的核心组…
阅读更多...
【肺炎分类数据集】数据量非常充足的新冠肺炎分类数据共享

【肺炎分类数据集】数据量非常充足的新冠肺炎分类数据共享

一、肺炎数据集介绍&#x1f349;&#xff1a; 1.1 格式&#x1f388; 按照标准的格式分为了①训练集train&#xff08;134138575198张&#xff09;&#xff0c;②验证集val&#xff08;8816张&#xff09;&#xff0c;③测试集test&#xff08;234390624张&#xff09;&#…
阅读更多...
当向数据库导入大量数据时,mysql主键唯一键重复插入,如何丝滑操作并不导入重复数据呢

当向数据库导入大量数据时,mysql主键唯一键重复插入,如何丝滑操作并不导入重复数据呢

解决办法&#xff1a; 答案来源&#xff1a;
阅读更多...
如何使用第三方库CryptoJS来计算base64二进制原文的SM3算法十六进制哈希值

如何使用第三方库CryptoJS来计算base64二进制原文的SM3算法十六进制哈希值

1、引入CryptoJS库。 <script src"https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>2、将base64字符串转换为字节数组。你可以使用CryptoJS.enc.Base64.parse()方法来实现&#xff1a; var base64Text "SGV…
阅读更多...
C++学习笔记总结练习：正则表达式

C++学习笔记总结练习：正则表达式

正则表达式 目录 regex正则表达式的定义regex_match/search/replace正则表达式的三个操作smatch、sregex_iterator正则表达式的结果对象以及与其配套的迭代器。 参考文献 正则表达式总结 1 正则表达式基础 不考虑子表达式的内容 头文件 #include<regex>库组件 库组件作…
阅读更多...
React Dva项目 简单引入models中的所有JS文件

React Dva项目 简单引入models中的所有JS文件

我们前面接触的 Dva项目 models目录下的文件还要一个一个引入 其实体验并不是很好 而且如果项目很大那就比较麻烦了 我们可以在 models 下创建一个 index.js 文件 编写代码如下 const context require.context("./", false, /\.js$/); export default context.key…
阅读更多...
乐鑫科技 2022 笔试面试题

乐鑫科技 2022 笔试面试题

岗位：嵌入式软件实习生。 个人情况：本科双非电子信息工程，硕士华五软件工程研一在读；本科做过一些很水的项目 ，也拿项目搞了一些奖，相对来说嵌入式方向比较对口。 时间线及面试流程 2021.04.02 笔试 题目分为选择题和编程题，选择题二十题，编程题两题； 选择题基本…
阅读更多...
【Go】Go数据操作 - 处理JSON文件

【Go】Go数据操作 - 处理JSON文件

目录 何为JSON 编码JSON 解码JSON 延伸拓展 何为JSON JSON (JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。JSON最初是 JavaScript的一部分&#xff0c;后由于便于快速编写的特性&#xff0c;被开发者独立出来。基本上所有的语言都支持JSON数据的…
阅读更多...
冠达管理：A股三大指数震荡整理 机构看好反弹趋势延续

冠达管理：A股三大指数震荡整理 机构看好反弹趋势延续

周一&#xff0c;沪深两市呈弱势震动格式&#xff0c;创业板指领跌。到收盘&#xff0c;上证综指跌0.59%&#xff0c;报3268.83点&#xff1b;深证成指跌0.83%&#xff0c;报11145.03点&#xff1b;创业板指跌1%&#xff0c;报2240.77点。 资金面上&#xff0c;沪深两市昨日合计…
阅读更多...
量化交易中的股票接口技术解析

量化交易中的股票接口技术解析

在当今数字化金融时代&#xff0c;股票接口成为连接量化交易策略与金融市场的桥梁&#xff0c;为投资者提供了高效、准确的数据获取和交易执行功能。 一、股票接口的基本原理&#xff1a; 股票接口是量化交易系统的核心组成部分&#xff0c;它负责连接投资者的交易程序与金融市…
阅读更多...
【力扣周赛】第357场周赛

【力扣周赛】第357场周赛

【力扣周赛】第357场周赛 2810. 故障键盘题目描述解题思路 2811. 判断是否能拆分数组题目描述解题思路 2810. 故障键盘 题目描述 描述&#xff1a;你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 ‘i’ 时&#xff0c;它会反转你所写的字符串。而输入其他字符则可以…
阅读更多...
梳理日常开发涉及的负载均衡

梳理日常开发涉及的负载均衡

负载均衡是当前分布式微服务时代最能提及的词之一&#xff0c;出于对分层、解耦、弱依赖、可配置、可靠性等概念的解读&#xff0c;一对一的模式变得不再可信赖&#xff0c;千变万化的网络环境中&#xff0c;冗余和备份显得格外重要&#xff0c;稍大型的系统就会存在大量微服务…
阅读更多...
docker小白第一天

docker小白第一天

docker小白第一天 docker是什么docker理念容器与虚拟机比较docker能干什么docker官网介绍docker的基本组成docker平台架构 docker是什么 系统平滑移植&#xff0c;容器虚拟化技术。即源代码配置环境版本&#xff0c;打个包形成一个镜像文件&#xff0c;即软件带环境一起安装&a…
阅读更多...
【果树农药喷洒机器人】Part1：研究现状分析以及技术路线介绍

【果树农药喷洒机器人】Part1：研究现状分析以及技术路线介绍

本专栏介绍&#xff1a;付费专栏&#xff0c;持续更新机器人实战项目&#xff0c;欢迎各位订阅关注。 关注我&#xff0c;带你了解更多关于机器人、嵌入式、人工智能等方面的优质文章&#xff01; 文章目录 一、项目背景二、国内外研究现状2.1 国内研究现状2.2 国外研究现状 三…
阅读更多...
RISC-V架构的演变

RISC-V架构的演变

随着苹果基于ARM的硅和新的RISC-V CPU的推出&#xff0c;对于CPU开发来说&#xff0c;这是一个令人兴奋的时刻&#xff0c;尽管开发人员的旅程目前对后者来说有点坎坷。 我最喜欢的理论是&#xff0c;没有发生是孤独的&#xff0c;而只是重复了以前发生过的事情&#xff0c;也…
阅读更多...
Linux 远程登录

Linux 远程登录

Linux 远程登录 Linux 一般作为服务器使用&#xff0c;而服务器一般放在机房&#xff0c;你不可能在机房操作你的 Linux 服务器。 这时我们就需要远程登录到Linux服务器来管理维护系统。 Linux 系统中是通过 ssh 服务实现的远程登录功能&#xff0c;默认 ssh 服务端口号为 2…
阅读更多...
最新文章

Copyright @ 2022~2023