HTML5 Web 存储|学习笔记

简介: 快速学习 HTML5 Web 存储

发者学堂课程【HTML5 新特性学习HTML5 Web 存储】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/396/detail/5052


HTML5 Web 存储


内容介绍:

一、Web 存储

二、示例


一、Web 存储

HTML5 提供了两种在客户端存储数据的新方法:

localStorage -没有时间限制的数据存储

sessionStorage -针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。

但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高

localStorage :

localStorage 方法存储的数据没有时间限制,一年以后数据仍然可以使用

sessionStorage:

sessionStorage 方法针对一个 session 进行数据存储,当用户关

闭当前浏览器窗口,数据会被删除


二、示例:

创建一个 index 文件,输入

<textarea style = “width: 200px;height: 200px” id= “ta”></textarea>

<button id = “btn”>save</button>

先来进行测试

继续创建一个 <script> 标签

<script>

var ta;

var btn;

window.onload = function(){

ta = document.getElementById(“ta”);

btn = document.getElementById(“btn”);

btn.onclick = function(){

alert(ta.value);

}

    }

</script>

进行测试

测试没有问题,接下来通过 localStorage 进行保存

在 ta = document.getElementById(“ta”);下添加一个 if 判断

<script>

var ta;

var btn;

window.onload = function(){

ta = document.getElementById(“ta”);

if(localStorage.text){

          ta.value = localStorage.text;

}

btn = document.getElementById(“btn”);

btn.onclick = function(){

//          alert(ta.value);

localStorage.text = ta.value;

}

    }

</script>

进行测试


image.png


这个地址无论我们什么时候打开,即使完全退出网址,下一次打开仍然存在,这就是 localStorage 的使用

创建一个新文件 index1,输入

<span id = “txt”>0</span>

<button id = “addbtn”>add</button>

添加一个 <script> 标签

<script>

var num = 0;

var txt;

var btn;

window.onload = function(){

   txt = document.getElementById(“txt”);

   btn = document.getElementById(“addbtn”);

   if(sessionStorage.num){

num = sessionStorage.num;

}else{

num = 0;

}

btn.onclick = function(){

   num++;

   sessionStorage.num = num;

   showNum();

}

}

function showNum() {

txt.innerHTML = num;

}

</script>

进行测试,点击就可以进行累加


image.png


相关文章
|
4月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
65 5
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
5月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
220 0
|
5月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
60 0
|
5月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
200 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
5月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
66 0
|
5月前
|
存储 缓存 前端开发
Web应用中的存储方式有哪些?
本文首发于微信公众号“前端徐徐”,介绍了几种常见的前端数据存储技术:Cookie、Web Storage(包括 localStorage 和 sessionStorage)、IndexedDB、Cache Storage 和 Memory Storage。每种技术的特点和使用场景不同,适用于不同的开发需求。文章详细解释了它们的使用方法、特点和应用场景,并提供了代码示例。
526 2
Web应用中的存储方式有哪些?
|
5月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
5月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布