首页 前端知识 HTML5新增的存储方式、及区别。

HTML5新增的存储方式、及区别。

2024-02-14 09:02:49 前端知识 前端哥 837 813 我要收藏

一、HTML5新增的存储方式:

  1. Web Storage(Web存储):Web Storage提供了两个对象用于在浏览器中存储数据:localStorage和sessionStorage。这些对象允许开发者在用户的浏览器中存储键值对,并且在不同的浏览器会话之间保持持久性(localStorage)或会话级别的存储(sessionStorage)。

  2. IndexedDB(索引数据库):IndexedDB是一个基于JavaScript的高性能、事务型的数据库系统。它允许开发者在浏览器中存储结构化数据,并支持索引和查询操作。IndexedDB可以用于存储大量数据,适用于离线应用程序或需要复杂数据查询的场景。

  3. File API(文件API):File API允许网页通过JavaScript访问用户本地文件系统中的文件。它提供了File和FileReader等对象,使开发者可以读取和处理用户选择的文件。这对于需要上传或处理文件的应用程序非常有用。

  4. WebSQL(Web SQL数据库):WebSQL是一个基于SQL的数据库系统,允许开发者在浏览器中使用SQL语句进行数据存储和查询。然而,WebSQL已经被废弃,不再是HTML5的推荐标准,不同浏览器的支持程度也不一致。

需要注意的是,这些存储机制在不同浏览器中的支持程度可能会有所差异,开发者在使用时需要考虑兼容性问题。此外,对于敏感信息(如用户密码等),应该采取适当的加密和安全措施,以保护用户数据的安全性。

二、cookie,localstorage和sessionstorage的区别?

cookie、localStorage、sessionStorage 都是浏览器的本地存储。

  1. cookie一般用于存储登录验证信息SessionID或者token。(应用场景)
    cookie是一小段存储在用户计算机上的数据。由服务器发送给浏览器,并在浏览器发送请求时自动返回给服务器。
    cookie主要用于识别用户、记录用户偏好设置和跟踪用户行为等。
    cookie有以下特点:

    • 存储容量较小(通常为4KB)

    • 在浏览器和服务器之间来回传递

    • 有过期时间,可以设置为长期保存或在会话结束时过期

    • 可以设置为只能通过安全的HTTPS连接传输

  2. localStorage常用于存储不易变动的数据,减轻服务器的压力。(应用场景)
    localStorage是HTML5中新增的一种数据存储机制。
    用于在浏览器本地持久化地存储数据,即在不同的浏览器窗口或标签页之间共享数据。
    localStorage有以下特点:

    • 存储容量较大(通常为5MB或更大)

    • 在浏览器关闭后仍然有效

    • 数据仅存储在客户端,不与服务器交互

    • 数据存储在硬盘上,即使重启计算机仍然存在

    • 只能在同一域名下共享数据

  3. sessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条的功能。(应用场景)
    sessionStorage是HTML5中新增的一种数据存储机制。
    用于在浏览器会话期间存储数据,即在同一个浏览器窗口或标签页中打开的页面之间共享数据。当会话结束(关闭窗口或标签页)时,sessionStorage中的数据将被清除。sessionStorage具有以下特点:

    • 存储容量较大(通常为5MB或更大)

    • 只在当前会话期间有效

    • 数据仅存储在客户端,不与服务器交互

    • 数据存储在内存中,不会持久化到磁盘

    • 只能在同一浏览器窗口或标签页中共享数据

三、怎么删除localStorage(存储)

(1)可以使用removeItem()方法。

javascriptCopy Code// 删除名为"myData"的localStorage项
localStorage.removeItem("myData");

在上面的示例中,我们使用removeItem()方法删除了名为"myData"的localStorage项。

(2)想要删除所有的localStorage数据,可以使用clear()方法:

javascriptCopy Code// 删除所有localStorage项
localStorage.clear();

注意,removeItem()clear()方法只会删除本地存储中的数据,不会影响其他浏览器数据或会话数据。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2005.html
标签
新增存储
评论
会员中心 联系我 留言建议 回顶部
复制成功!