前端祖传三件套HTML的HTML5之Web存储 localStorage/sessionStorage

简介: HTML5 是 Web 技术的重要更新,其中包括一些新特性。其中之一就是 Web 存储。Web 存储允许我们在客户端(浏览器)中存储数据,而不必依赖服务器。本文介绍两种常见的 Web 存储:localStorage 和 sessionStorage。

HTML5 Web 存储——localStorage/sessionStorage


localStorage

localStorage 允许我们在客户端存储数据,并在同一域名下的所有页面中共享这些数据。存储的数据将一直存在,即使用户关闭浏览器也是如此。下面是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
  <title>LocalStorage Example</title>
</head>
<body>
  <h1>LocalStorage Example</h1>
  <input type="text" id="name" placeholder="Enter your name">
  <button onclick="saveName()">Save Name</button>
  <script>
    function saveName() {
      var name = document.getElementById('name').value;
      localStorage.setItem('name', name);
      alert('Name saved successfully!');
    }
  </script>
</body>
</html>

在这个例子中,我们使用 localStorage.setItem() 方法将用户输入的名称存储在本地存储中。可以在另一个页面或者刷新页面后使用 localStorage.getItem() 来检索存储的数据。

var name = localStorage.getItem('name');

sessionStorage

sessionStorage 与 localStorage 类似,但有一个主要区别:存储在 sessionStorage 中的数据仅在当前会话期间可用。当用户关闭浏览器标签页或浏览器窗口时,存储在 sessionStorage 中的数据将被删除。下面是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
  <title>SessionStorage Example</title>
</head>
<body>
  <h1>SessionStorage Example</h1>
  <input type="text" id="name" placeholder="Enter your name">
  <button onclick="saveName()">Save Name</button>
  <script>
    function saveName() {
      var name = document.getElementById('name').value;
      sessionStorage.setItem('name', name);
      alert('Name saved successfully!');
    }
  </script>
</body>
</html>

在这个例子中,我们使用 sessionStorage.setItem() 方法将用户输入的名称存储在 sessionStorage 中。可以在同一会话期间的另一个页面或者刷新页面后使用 sessionStorage.getItem() 来检索存储的数据。

var name = sessionStorage.getItem('name');

总结

localStorage 和 sessionStorage 都允许我们在客户端(浏览器)中存储数据。localStorage 适用于需要持久保存数据的情况,而 sessionStorage 则适用于在同一会话期间共享数据的情况。

但是,我们应该注意到,与传统的 Cookie 相比,Web 存储具有更好的性能和安全性。它们还提供了更大的存储容量,因此我们可以使用 Web 存储来存储更多的数据

目录
打赏
0
0
0
0
171
分享
相关文章
|
1天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
19 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
109 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
51 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
82 25
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
65 6
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
182 0
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
285 14
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等