17_HTML5 Web 存储 --[HTML5 API 学习之旅]

HTML5 Web 存储(Web Storage)是 HTML5 引入的一种在用户浏览器中存储数据的机制。它提供了比传统的 cookies 更加方便和强大的功能,包括更大的存储空间、更好的性能以及更简单的 API。Web 存储主要分为两种类型:localStoragesessionStorage

1. localStorage

  • 持久性:数据不会过期,除非被明确删除或用户清空浏览器缓存。
  • 适用场景:适合存储不需要立即发送到服务器的数据,例如用户的偏好设置、购物车内容等。
  • API 方法
    • setItem(key, value):存储数据项。
    • getItem(key):获取指定键的数据项。
    • removeItem(key):移除指定键的数据项。
    • clear():清除所有数据项。
    • key(index):返回指定索引位置的键名。

示例代码

// 设置一个名为 'username' 的键值对
localStorage.setItem('username', '张三');// 获取并打印 'username' 的值
console.log(localStorage.getItem('username')); // 输出: 张三// 更新 'username' 的值
localStorage.setItem('username', '李四');
console.log(localStorage.getItem('username')); // 输出: 李四// 删除 'username' 键值对
localStorage.removeItem('username');
console.log(localStorage.getItem('username')); // 输出: null// 清除所有数据项
localStorage.clear();

下面提供了五个使用 localStorage 的 HTML5 Web 存储示例。这些例子展示了如何在不同的场景中利用 localStorage 来存储和检索数据,从而提升用户体验或实现特定功能。

示例 1: 存储用户偏好设置

在这个例子中,我们将用户的主题颜色偏好存储在 localStorage 中,并在页面加载时应用这些设置。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>用户偏好设置</title><style id="themeStyle"></style><script>function setTheme(color) {localStorage.setItem('themeColor', color);document.getElementById('themeStyle').innerHTML = `body { background-color: ${color}; }`;}window.onload = function() {const savedTheme = localStorage.getItem('themeColor');if (savedTheme) {setTheme(savedTheme);}};</script>
</head>
<body><button onclick="setTheme('lightblue')">浅蓝色主题</button><button onclick="setTheme('lightgreen')">浅绿色主题</button><button onclick="setTheme('white')">白色主题</button>
</body>
</html>

在这里插入图片描述

示例 2: 记录用户访问次数

这里我们使用 localStorage 来记录用户访问网站的次数,并在每次访问时更新计数器。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>访问次数统计</title><script>window.onload = function() {let visits = localStorage.getItem('visits') || 0;visits++;localStorage.setItem('visits', visits);document.getElementById('visitCount').innerText = `您已经访问了 ${visits} 次本页面。`;};</script>
</head>
<body><p id="visitCount"></p>
</body>
</html>

在这里插入图片描述

示例 3: 购物车功能

在这个例子中,我们将购物车中的商品信息存储在 localStorage 中,以便用户可以在不同会话之间保持其选择的商品。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>购物车</title><script>/*** 将商品添加到购物车。* * @param {string} item - 要添加的商品名称。*/function addToCart(item) {// 从 localStorage 中获取名为 'cart' 的项,并尝试将其解析为 JSON 数组。// 如果该项不存在或为空,则初始化为一个空数组。let cart = JSON.parse(localStorage.getItem('cart')) || [];// 将新商品添加到购物车数组中。cart.push(item);// 将更新后的购物车数组转换回 JSON 字符串,并保存到 localStorage 中。localStorage.setItem('cart', JSON.stringify(cart));// 弹出提示框,告知用户商品已成功添加到购物车。alert(`${item} 已添加到购物车`);}/*** 查看当前购物车的内容。*/function viewCart() {// 从 localStorage 中获取名为 'cart' 的项,并尝试将其解析为 JSON 数组。// 如果该项不存在或为空,则初始化为一个空数组。let cart = JSON.parse(localStorage.getItem('cart')) || [];// 使用 Array.prototype.join 方法将购物车中的所有商品以逗号分隔连接成一个字符串,// 然后通过 alert 弹窗向用户展示这些商品。// 如果购物车为空,则只会显示“购物车内容: ”。alert(`购物车内容: ${cart.join(', ')}`);}</script>
</head>
<body><!-- 添加商品按钮 --><button onclick="addToCart('苹果')">添加苹果</button><button onclick="addToCart('香蕉')">添加香蕉</button><!-- 查看购物车按钮 --><button onclick="viewCart()">查看购物车</button>
</body>
</html>

在这里插入图片描述

示例 4: 表单自动填充

当用户填写表单后,我们可以将表单数据保存到 localStorage,并在用户返回页面时自动填充这些数据。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单自动填充</title><script>// 当页面完全加载完毕后执行以下函数window.onload = function() {// 获取表单中的姓名和邮箱输入框元素const nameInput = document.getElementById('name');const emailInput = document.getElementById('email');// 从 localStorage 中恢复之前保存的姓名和邮箱值(如果存在)nameInput.value = localStorage.getItem('name') || ''; // 如果没有保存的值,则设置为空字符串emailInput.value = localStorage.getItem('email') || ''; // 如果没有保存的值,则设置为空字符串// 监听姓名输入框的变化事件,当用户输入时实时保存到 localStoragenameInput.oninput = function() {localStorage.setItem('name', this.value); // 将当前输入框的值保存到 'name' 键中};// 监听邮箱输入框的变化事件,当用户输入时实时保存到 localStorageemailInput.oninput = function() {localStorage.setItem('email', this.value); // 将当前输入框的值保存到 'email' 键中};};</script>
</head>
<body><!-- 表单元素 --><form><!-- 姓名输入框 --><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><!-- 邮箱输入框 --><label for="email">邮箱:</label><input type="email" id="email" name="email"><br><br><!-- 提交按钮 --><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

示例 5: 简单的任务列表

这个例子展示了一个简单的任务列表应用程序,允许用户添加、删除任务,并且任务会在浏览器关闭后仍然存在。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>任务列表</title><script>/*** 加载任务列表* 从localStorage中获取任务列表数据,并添加到页面上的任务列表中*/function loadTasks() {const taskList = document.getElementById('taskList');const tasks = JSON.parse(localStorage.getItem('tasks')) || [];tasks.forEach(task => {const li = document.createElement('li');li.textContent = task;taskList.appendChild(li);});}/*** 添加任务* 获取输入框中的任务描述,将其添加到任务列表中,并保存到localStorage中*/function addTask() {const taskInput = document.getElementById('newTask');const taskText = taskInput.value.trim();if (taskText !== '') {const tasks = JSON.parse(localStorage.getItem('tasks')) || [];tasks.push(taskText);localStorage.setItem('tasks', JSON.stringify(tasks));// 创建一个新的li元素const li = document.createElement('li');// 设置li元素的文本内容为任务文本li.textContent = taskText;// 将新的li元素添加到任务列表中document.getElementById('taskList').appendChild(li);taskInput.value = '';}}/*** 清除所有任务* 从localStorage中移除任务列表数据,并清空页面上的任务列表*/function clearTasks() {localStorage.removeItem('tasks');document.getElementById('taskList').innerHTML = '';}// 页面加载时自动调用loadTasks函数window.onload = loadTasks;</script>
</head>
<body><h2>我的任务列表</h2><input type="text" id="newTask" placeholder="输入新任务..."><button onclick="addTask()">添加任务</button><button onclick="clearTasks()">清除所有任务</button><ul id="taskList"></ul>
</body>
</html>

在这里插入图片描述

这些示例展示了 localStorage 在各种实际应用场景中的使用方式,包括但不限于存储用户偏好、统计访问次数、实现购物车功能、自动填充表单以及创建持久化的任务列表。通过合理利用 localStorage,可以显著提高 Web 应用的功能性和用户体验。

2. sessionStorage

  • 会话性:数据仅在当前会话期间有效(即同一个浏览器标签页),关闭页面或标签后数据会被清除。
  • 适用场景:适合临时存储与单个会话相关的数据,如表单数据、临时状态信息等。
  • API 方法:与 localStorage 相同。

示例代码

// 设置一个名为 'sessionData' 的键值对
sessionStorage.setItem('sessionData', '会话数据');// 获取并打印 'sessionData' 的值
console.log(sessionStorage.getItem('sessionData')); // 输出: 会话数据// 关闭页面或标签后,再打开新的页面或标签,尝试获取 'sessionData'
console.log(sessionStorage.getItem('sessionData')); // 输出: null (因为会话已结束)

当然,下面是两个使用 sessionStorage 的 HTML5 Web 存储示例。这些例子展示了如何在不同的场景中利用 sessionStorage 来存储和检索数据,从而提升用户体验或实现特定功能。

示例 1: 表单数据保存

在这个例子中,我们将表单中的用户输入临时保存到 sessionStorage 中。如果用户刷新页面或在同一个浏览器标签页中导航离开再返回,表单数据将自动恢复。但是一旦关闭了该标签页,所有数据都会被清除。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单数据保存</title><script>window.onload = function() {// 恢复表单数据(如果存在)const nameInput = document.getElementById('name');const emailInput = document.getElementById('email');nameInput.value = sessionStorage.getItem('name') || '';emailInput.value = sessionStorage.getItem('email') || '';// 监听表单输入事件,实时保存数据到 sessionStoragenameInput.oninput = function() {sessionStorage.setItem('name', this.value);};emailInput.oninput = function() {sessionStorage.setItem('email', this.value);};};</script>
</head>
<body><form><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

解释:
  • window.onload:当页面加载时,尝试从 sessionStorage 恢复表单数据。
  • oninput 事件监听器:每当用户在输入框中输入内容时,立即将最新的值保存到 sessionStorage

示例 2: 记录会话中的浏览历史

在这个例子中,我们记录用户在同一会话期间访问过的页面,并通过一个简单的列表展示出来。一旦用户关闭当前浏览器标签页,所有记录的数据都将被清除。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>浏览历史记录</title><script>// 页面加载完成后执行的函数window.onload = function() {// 更新浏览历史updateHistory(window.location.href);// 显示浏览历史displayHistory();};/*** 更新浏览历史的函数* @param {string} url 当前页面的URL*/function updateHistory(url) {// 从sessionStorage获取历史记录,如果不存在则初始化为数组let history = JSON.parse(sessionStorage.getItem('history')) || [];// 如果历史记录中不包含当前URL,则添加到历史记录中if (!history.includes(url)) {history.push(url);// 将更新后的历史记录保存到sessionStoragesessionStorage.setItem('history', JSON.stringify(history));}}/*** 显示浏览历史的函数*/function displayHistory() {// 从sessionStorage获取历史记录,如果不存在则初始化为数组let history = JSON.parse(sessionStorage.getItem('history')) || [];// 获取页面上的历史记录列表元素const historyList = document.getElementById('historyList');// 清空现有列表historyList.innerHTML = '';// 遍历历史记录,创建并添加到列表中history.forEach(function(url, index) {const li = document.createElement('li');li.textContent = `${index + 1} 次访问: ${url}`;historyList.appendChild(li);});}</script>
</head>
<body><h2>浏览历史记录</h2><ul id="historyList"></ul>
</body>
</html>

在这里插入图片描述

解释:
  • updateHistory(url):每次页面加载时调用此函数,将当前页面 URL 添加到 sessionStorage 中的浏览历史数组里(避免重复添加)。
  • displayHistory():从 sessionStorage 中读取浏览历史,并将其显示在一个无序列表 (<ul>) 中。
  • window.onload:当页面加载时,更新并显示浏览历史。

这两个示例展示了 sessionStorage 在不同应用场景中的使用方式,包括但不限于保存表单数据以防止意外丢失以及记录用户的浏览行为。由于 sessionStorage 数据仅在当前会话期间有效,因此非常适合处理与单个浏览会话相关联的信息。

Web 存储的特点

HTML5 Web 存储(Web Storage)提供了两种在用户浏览器中存储数据的方式:localStoragesessionStorage。它们具有以下特点,这些特点使得 Web 存储成为一种强大且灵活的客户端数据管理工具。

1. 持久性和会话性

  • localStorage

    • 数据是持久性的,除非被明确删除或用户清空浏览器缓存,否则数据不会过期。
    • 适合存储不需要立即发送到服务器的数据,例如用户的偏好设置、购物车内容等。
  • sessionStorage

    • 数据仅在当前会话期间有效(即同一个浏览器标签页),关闭页面或标签后数据会被清除。
    • 适合临时存储与单个会话相关的数据,如表单数据、临时状态信息等。

2. 容量较大

  • 每个域名通常可以存储大约 5MB 的数据(具体取决于浏览器实现)。这比传统的 cookies 提供了更多的空间来存储数据。

3. 同步操作

  • 所有的读写操作都是同步的,这意味着它们会阻塞 JavaScript 执行,直到操作完成。不过,对于大多数应用场景来说,这种延迟是可以接受的,因为 Web 存储的操作速度非常快。

4. 只支持字符串

  • Web 存储只能保存字符串格式的数据。如果要存储复杂的数据结构(如对象或数组),需要先使用 JSON.stringify() 方法将其转换为字符串,读取时再用 JSON.parse() 方法解析回来。

5. 简单的 API

  • 提供了一组简单易用的方法来进行数据的存取和管理,包括:
    • setItem(key, value):存储数据项。
    • getItem(key):获取指定键的数据项。
    • removeItem(key):移除指定键的数据项。
    • clear():清除所有数据项。
    • key(index):返回指定索引位置的键名。

6. 事件驱动

  • 支持 storage 事件,当同一域下的其他窗口或标签页中的 Web 存储发生改变时触发。这可以用来实现跨窗口或标签页之间的通信。

7. 安全性考虑

  • 数据是明文存储在客户端的,因此不适合用于敏感信息的存储,除非采取额外的安全措施(如加密)。
  • Web 存储的数据是基于同源策略的,即只有相同协议、主机名和端口的页面才能访问同一存储区域的数据。

8. 离线功能

  • 可以用来存储应用程序状态或用户生成的内容,即使在网络连接不可用的情况下也能提供一定程度的功能和服务。

9. 性能优势

  • 相较于 cookies,Web 存储不会随每个 HTTP 请求一起发送到服务器,从而减少了不必要的网络流量,提高了性能。

使用场景示例

  • 用户偏好设置:可以将用户的界面偏好(如主题颜色、字体大小等)存储在 localStorage 中,以便下次访问时自动应用这些设置。
  • 离线存储:允许用户在网络连接不可用的情况下浏览网站,并在网络恢复后再提交交互数据。
  • 跨页面通信:通过监听 storage 事件,可以在同一域下的不同标签页之间共享和同步数据变化。

总之,HTML5 Web 存储提供了一种简单而有效的方式来管理和持久化客户端数据,增强了 Web 应用的功能性和用户体验。它不仅简化了开发流程,还为开发者提供了更多的灵活性来处理不同类型的数据需求。

测试代码下载

html5_api代码

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

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

相关文章

Java处理视频思路

1.首先实现断点续传功能。 断点续传实现思路&#xff1a; 前端对文件分块。前端使用多线程一块一块上传&#xff0c;上传前给服务端发一个消息校验该分块是否上传&#xff0c;如果已上传则不再上传。如果从该断点处断网了&#xff0c;下次上传时&#xff0c;前面的分块已经存在…

RealityCapture导入视频序列失败

问题原因&#xff1a;如果导入的视频文件存在多余的元数据&#xff0c;那么在这里会发生导入失败。 以本人华为手机拍摄的一段.mp4视频为例&#xff1a; 利用ffmpeg在窗口命令行中检查你的视频—— ffmpeg -i your_video_name.mp4your_video_name是你的视频文件名 如下图所示&…

Windows下Python+PyCharm的安装步骤及PyCharm的使用

Windows下PythonPyCharm的安装步骤及PyCharm的使用 文章目录 Windows下PythonPyCharm的安装步骤及PyCharm的使用一、Python的安装&#xff08;1&#xff09;环境准备&#xff08;2&#xff09;Python安装&#xff08;3&#xff09;pip组件的安装 二、PyCharm的安装&#xff08;…

khadas edge2安装ubuntu22.04与ubuntu20.04 docker镜像

khadas edge2安装ubuntu22.04与ubuntu20.04 docker镜像 一、资源准备1.1 镜像文件1.2 刷机工具1.3 ubuntu20.04 docker镜像&#xff08;具备demon无人机所需各种驱动&#xff09; 二、开始刷机&#xff08;安装ubuntu22.04系统&#xff09;2.1 进入刷机状态2.2 刷机 三、docker…

ASP.NET |日常开发中常见问题归纳讲解

ASP.NET &#xff5c;日常开发中常见问题归纳讲解 前言一、性能问题1.1 数据库访问性能1.2 视图状态&#xff08;在ASP.NET Web Forms 中&#xff09; 二、安全问题2.1 SQL 注入2.2 跨站脚本攻击&#xff08;XSS&#xff09; 三、状态管理问题3.1 会话状态&#xff08;Session …

基础爬虫案例实战

我们已经学习了多进程、requests、正则表达式的基本用法,但还没有完整地实现过一个爬取案例。这一节&#xff0c;我们就来实现一个完整的网站爬虫&#xff0c;把前面学习的知识点串联起来&#xff0c;同时加深对这些知识点的理解。 准备工作 我们需要先做好如下准备工作。 安…

JAVA: 子类“覆盖”父类的成员变量

参考&#xff1a;JAVA: 子类“覆盖”父类的成员变量_子类覆盖父类成员变量-CSDN博客 public class Person {static String name "person";public String getName() {return name;}public void setName(String name) {this.name name;} }public class Dad extends …

Pandas08

Pandas01 Pandas02 Pandas03 Pandas04 Pandas05 Pandas06 Pandas07 文章目录 内容回顾同期群分析1.1 同期群分析概念1.2 案例代码 数据分析报告数据分析工作内容数据分析简历说明用户生命周期标签1 什么是生命周期标签2 如何计算生命周期标签 内容回顾 TGI 偏好分析 TGI 目标…

Linux 硬盘扩容 分区 挂载

Linux 硬盘扩容 分区 & 挂载 1. 添加分区 1.1. 查看新添加的硬盘 fdisk -l假设当前未挂载的盘符是/dev/sdb&#xff0c;后文中所有操作都按挂载/dev/sdb 操作 1.2. 分区管理 小硬盘 fdisk /dev/sdb大硬盘&#xff08;2TB以上&#xff09; gdisk /dev/sdb1.3. 编辑分…

Python einops库介绍

einops 是一个轻量级的 Python 库,提供了直观和灵活的张量操作方法。其核心功能包括重排(rearrange)、重塑(reshape) 和 归约(reduce),并通过简单的字符串表达式定义复杂的张量操作,适用于 Numpy、PyTorch、TensorFlow、JAX 等常用深度学习框架。 einops 的主要功能 …

Spring Boot 项目中 Maven 剔除无用 Jar 引用的最佳实践

目录 引言Maven 依赖管理的基础概念 2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机制 无用依赖的常见问题与影响剔除无用 Jar 引用的常见方法 4.1 识别无用依赖4.2 使用 Maven 的 dependency:analyze 插件4.3 配置 scope 以优化依赖范围4.4 使用 exclude 排除传递依赖4.5 分析…

Windows11家庭版 Docker Desktop 的安装历程

1.下面是 Docker Desktop 的官网下载地址 窗户 |Docker 文档 不出意外下载会很慢&#xff0c;下载好了先不安装 2.打开电脑的一些兼容程序 控制面板 -> 程序 -> 启用或关闭Windows功能 勾选下列兼容功能&#xff0c;有Hyper-v也勾上&#xff0c;不过我没有 3.下载WSL…

总结TCP/IP四层模型

总结TCP/IP四层模型 阅读目录(Content) 一、TCP/IP参考模型概述 1.1、TCP/IP参考模型的层次结构二、TCP/IP四层功能概述 2.1、主机到网络层  2.2、网络互连层  2.3、传输层  2.3、应用层 三、TCP/IP报文格式 3.1、IP报文格式3.2、TCP数据段格式3.3、UDP数据段格式3.4、套…

Apriori关联规则算法 HNUST【数据分析技术】(2025)

1.理论知识 Apriori是一种常用的数据关联规则挖掘方法&#xff0c;它可以用来找出数据集中频繁出现的数据集合。该算法第一次实现在大数据集上的可行的关联规则提取&#xff0c;其核心思想是通过连接产生候选项及其支持度&#xff0c;然后通过剪枝生成频繁项集。 Apriori算法的…

汽车网络安全基线安全研究报告

一、引言 随着汽车行业朝着智能网联方向飞速发展&#xff0c;汽车网络安全已成为保障用户安全和行业健康发展的关键要素。本报告将深入探讨汽车网络安全相关内容&#xff0c;以及国际、国内重要的汽车网络安全标准基线和相应防护措施等内容。 二、汽车网络安全的重要性 &…

机器学习2-NumPy

ndarray自动广播扩展维度&#xff0c;便于进行行列式&#xff0c;数组计算 # 自动广播机制&#xff0c;1维数组和2维数组相加# 二维数组维度 2x5 # array([[ 1, 2, 3, 4, 5], # [ 6, 7, 8, 9, 10]]) d np.array([[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]) # c是一…

MyBatis动态 SQL 的执行原理

MyBatis 动态 SQL 是 MyBatis 框架中的一个重要特性&#xff0c;它允许开发者根据条件动态地生成不同的 SQL 语句。通过使用动态 SQL&#xff0c;开发者可以根据传入的参数动态地构建 SQL 查询&#xff0c;这样就避免了写多个 SQL 语句&#xff0c;提升了代码的灵活性和可维护性…

info There appears to be trouble with your network connection. Retrying

这个错误信息表明你在使用包管理器安装项目依赖时遇到了网络连接问题。 可能的解决方法&#xff1a; 检查当前node.js版本是否过低。 建议使用当前长期支持版本 yarn的淘宝镜像&#xff1a;yarn的淘宝镜像-CSDN博客 nvm常用命令:NVM常用命令-CSDN博客 下载 | Node.js 中文…

GitLab 停止中国区用户访问,为用户提供60天的迁移期

近日&#xff0c;全球知名的代码托管平台 GitLab 宣布了一个重大变化&#xff1a;将停止为中国大陆、香港及澳门地区的用户提供访问服务&#xff0c;建议用户访问授权国内的产品极狐 GitLab.cn。 极狐 GitLab.cn 是 GitLab 授权的独立中国公司&#xff0c;之前该公司还发生过举…

C#冒泡排序

一、冒泡排序基本原理 冒泡排序是一种简单的排序算法。它重复地走访要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排序完成。 以一个简单的整数数…