【温故而知新】HTML5存储localStorage/sessionStorage

这篇具有很好参考价值的文章主要介绍了【温故而知新】HTML5存储localStorage/sessionStorage。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、概念

HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点:

  1. 新增语义元素:HTML5引入了许多新的语义元素,如<header>、<footer>、<article>、<section>等,这些元素有助于提高网页的结构化和可访问性。
  2. 媒体支持:HTML5引入了<audio><video>元素,使得开发者可以在网页上直接嵌入音频和视频内容,而不需要依赖第三方插件。
  3. Canvas绘图:HTML5引入了<canvas>元素,使得开发者可以使用JavaScript在网页上绘制图形和动画。
  4. 语义化标签:HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如,使用<nav>元素表示导航链接,使用<article>元素表示独立的内容等。
  5. 交互性:HTML5提供了更多的API和事件处理程序,使得开发者可以创建更加交互式的网页和应用。例如,拖放功能、文件上传和下载、地理定位等。
  6. 离线和存储:HTML5提供了离线存储和会话存储功能,使得开发者可以在用户的设备上存储数据,以便在离线时使用。
  7. 更好的表单控制:HTML5改进了表单元素和输入类型,使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具,它为开发者提供了更多的功能和灵活性,使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

二、存储localStorage

HTML5存储是一种用于在客户端存储数据的技术。它提供了几种存储选项,包括Web存储、Web SQL数据库和IndexedDB。这些存储选项可以在用户的浏览器中存储数据,以便在重新加载页面或关闭浏览器后仍然可用。

下面是一个使用HTML5 Web存储的简单案例代码:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Web存储</title>
    <script>
        // 存储数据
        function storeData() {
            var name = document.getElementById("name").value;
            localStorage.setItem("name", name);
        }

        // 检索数据
        function retrieveData() {
            var name = localStorage.getItem("name");
            document.getElementById("display").innerHTML = "您的名字是:" + name;
        }
    </script>
</head>
<body>
    <h1>HTML5 Web存储</h1>
    <input type="text" id="name" placeholder="请输入您的名字">
    <button onclick="storeData()">存储</button>
    <br>
    <button onclick="retrieveData()">检索</button>
    <p id="display"></p>
</body>
</html>

在上面的代码中,我们使用了localStorage对象来存储和检索数据。在storeData函数中,我们获取输入框中的值,并使用localStorage.setItem方法将其存储在名为"name"的键下。在retrieveData函数中,我们使用localStorage.getItem方法检索存储的值,并将其显示在页面上。

这只是一个简单的示例,用于演示HTML5 Web存储的基本用法。您可以根据自己的需求扩展和修改代码。

方法
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);

三、存储sessionStorage

sessionStorage是HTML5中提供的一种在浏览器会话期间存储数据的方式。与localStorage不同,sessionStorage存储的数据仅在当前会话期间有效,即当用户关闭浏览器窗口或标签页时,sessionStorage中的数据会被清除。

在使用sessionStorage存储数据时,您可以使用以下方法:

  1. setItem(key, value): 将键值对存储到sessionStorage中。其中key是要存储的数据的键,value是要存储的数据的值。
sessionStorage.setItem("name", "John");
  1. getItem(key): 检索sessionStorage中存储的值。其中key是要检索的数据的键。
var name = sessionStorage.getItem("name");
  1. removeItem(key): 从sessionStorage中删除指定键的数据。
sessionStorage.removeItem("name");
  1. clear(): 清除sessionStorage中的所有数据。
sessionStorage.clear();

以下是一个使用sessionStorage的简单示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 sessionStorage存储</title>
    <script>
        // 存储数据
        function storeData() {
            var name = document.getElementById("name").value;
            sessionStorage.setItem("name", name);
        }

        // 检索数据
        function retrieveData() {
            var name = sessionStorage.getItem("name");
            document.getElementById("display").innerHTML = "您的名字是:" + name;
        }
    </script>
</head>
<body>
    <h1>HTML5 sessionStorage存储</h1>
    <input type="text" id="name" placeholder="请输入您的名字">
    <button onclick="storeData()">存储</button>
    <br>
    <button onclick="retrieveData()">检索</button>
    <p id="display"></p>
</body>
</html>

在上述代码中,我们使用sessionStorage对象实现了存储和检索数据的功能。在storeData函数中,我们获取输入框中的值,并使用sessionStorage.setItem方法将其存储在名为"name"的键下。在retrieveData函数中,我们使用sessionStorage.getItem方法检索存储的值,并将其显示在页面上。

注意:与localStorage不同,sessionStorage的存储是基于每个窗口或标签页的。即使同一个网站在多个标签页中打开,每个标签页会有自己独立的sessionStorage,它们之间的数据是隔离的。

四、区别及优缺点

localStorage和sessionStorage是HTML5中提供的两种在浏览器端存储数据的方式。它们的区别和优缺点如下:

1. 区别:

  • 数据的生存周期:localStorage中存储的数据在浏览器关闭后仍然有效,而sessionStorage中存储的数据仅在当前会话期间有效,即当用户关闭浏览器窗口或标签页时,sessionStorage中的数据会被清除。
  • 数据的共享性:localStorage中存储的数据是在同一域名下的多个窗口和标签页之间共享的,而sessionStorage中存储的数据仅在同一个窗口或标签页中共享。
  • 存储容量:localStorage和sessionStorage的存储容量通常为5MB,但实际容量可能因浏览器和操作系统的限制而有所不同。

2. 优缺点:

localStorage的优点:

  • 永久存储:localStorage中存储的数据在浏览器关闭后仍然有效,可以用于持久化存储用户的偏好设置、登录状态等信息。
  • 共享性:localStorage中存储的数据可以在同一域名下的多个窗口和标签页之间共享,方便在不同页面之间传递数据。

localStorage的缺点:

  • 容量限制:localStorage通常有一定的存储容量限制,如果存储大量数据可能会受到容量限制。
  • 安全性:由于localStorage中的数据是永久存储的,可能会存在安全风险,例如存储用户的敏感信息,如果不加密存储可能会被滥用。

sessionStorage的优点:

  • 临时存储:sessionStorage中存储的数据仅在当前会话期间有效,可以用于暂时存储会话相关的数据,避免数据泄露和安全风险。
  • 隔离性:sessionStorage中存储的数据仅在同一个窗口或标签页中共享,可以避免不同页面之间相互干扰。

sessionStorage的缺点:

  • 临时性:sessionStorage中存储的数据在浏览器关闭后会被清除,不能实现持久化存储。

根据具体业务需求,可以选择使用localStorage或sessionStorage来存储数据。如果需要持久化存储数据或在多个窗口和标签页之间共享数据,可以使用localStorage;如果只需要在当前会话期间临时存储数据或避免不同页面之间相互干扰,可以使用sessionStorage。文章来源地址https://www.toymoban.com/news/detail-801411.html

到了这里,关于【温故而知新】HTML5存储localStorage/sessionStorage的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【温故而知新】HTML元素/属性/标题/注释/段落/文本格式/头部/主体

    HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它被用来描述网页的结构和内容,并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本,增加了许多新的元素和功能,以适应现代网页开发的需求。 HTML5 提供了许多新的元素和

    2024年01月16日
    浏览(45)
  • 温故而知新-JVM垃圾收集器

    标记-清除 复制算法 标记-整理 现在垃圾收集器均采用分代收集策略,新生代由于98%的对象都是朝生夕死,复制算法更合适,只复制还存活的对象,工作量小,所以效率高。显然复制算法不适合老年代,因为老年代中的对象大部分是大对象,且长时间存活,复制算法效率太低

    2024年02月15日
    浏览(64)
  • 【温故而知新】JavaScript类、类继承、静态方法

    JavaScript是一种广泛使用的编程语言,主要用于Web开发。它是一种脚本语言,这意味着它不需要像编译语言那样预先编译,而是在运行时解释和执行。JavaScript可以直接在浏览器中运行,这使得它在前端开发中特别重要,可以用于动态生成和更改网页内容、响应用户交互、发送

    2024年01月22日
    浏览(47)
  • 【温故而知新】JavaScript的继承方式有那些

    JavaScript使用原型链来实现继承。每个JavaScript对象都有一个原型(prototype)属性,它指向另一个对象。当我们访问一个对象的属性时,如果该对象没有该属性,JavaScript会沿着原型链向上查找,直到找到该属性或者到达原型链的顶部(即Object.prototype)。 有多种方式来实现继承

    2024年01月19日
    浏览(53)
  • 【温故而知新】JavaScript初始化/初始化加载

    在JavaScript中,对象、数组、函数、类等都可以通过不同的方式进行初始化。以下是几种常见的初始化方式: 对象初始化: 使用字面量方式: 使用构造函数方式: 数组初始化: 使用字面量方式: 使用构造函数方式: 函数初始化: 类初始化: 使用Array的of和from方法进行数组

    2024年01月24日
    浏览(72)
  • 深浅拷贝,温故知新

    1.1、概念 对象的深拷贝是指其属性与其拷贝的源对象的属性不共享相同的引用(指向相同的底层值)的副本。 因此,当你更改源或副本时,可以确保不会导致其他对象也发生更改;也就是说,你不会无意中对源或副本造成意料之外的更改。 在深拷贝中,源和副本是完全独立

    2024年02月03日
    浏览(43)
  • 温故知新(十一)——IIC

    IIC(I2C)是一种同步、多主、多从、分组交换、单端、串行计算机总线,由飞利浦半导体(现在的 NXP 半导体)在 1982 年发明。它广泛用于在短距离、板内通信中将低速外设集成电路附加到处理器和微控制器上。 I2C 总线有两根线 SDA/SCL 就可以连一堆芯片,实现很多的外设应用。

    2024年02月09日
    浏览(44)
  • 温故知新—Activity的五种启动模式

    这两天遇到了一个 bug ,说是应用打开一个二级页面,然后直接回到桌面,并不是杀掉应用,只是回到桌面,再次打开的时候没有回到那个二级页面,而是回到了首页。 看到这里,很多人大概都知道是什么原因了,没错,就是 Activity 的启动模式设置为了 singleTask 而导致的问题

    2024年02月09日
    浏览(51)
  • 温故知新:dfs模板-843. n-皇后问题

    n−n−皇后问题是指将 nn 个皇后放在 n×nn×n 的国际象棋棋盘上,使得皇后不能相互攻击到,即任意两个皇后都不能处于同一行、同一列或同一斜线上。 现在给定整数 nn,请你输出所有的满足条件的棋子摆法。 输入格式 共一行,包含整数 nn。 输出格式 每个解决方案占 

    2024年02月07日
    浏览(43)
  • Linux学习第31天:Linux MISC 驱动实验:温故知新

    Linux版本号4.1.15   芯片I.MX6ULL                                     大叔学Linux    品人间百味  思文短情长           学习是一个不断重复的过程。只有不断的使用、修正,才能越记越牢。将学习到的新的知识点应用到以往的项目经验中,才能不断提升自我,长此以往

    2024年02月06日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包