[html] 学习笔记--Web存储
HTML5 提供了两种在客户端存储数据的新方法之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。cookie有时间限定，可以自定义设置。
1、客户端存储数据的新方法
1）localStorage-没有时间限制的数据存储
2）sessionStorage-针对一个session的数据存储，当浏览器关闭，数据就会清除
2、Web存储-localStorage
1）存储特点：localStorage存储的数据没有时间限制，第二天，第二周或者一年之后，数据依然可以使用。
实现在文本框中输入的值，刷新页面也不消失：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script src = "app.js"></script>
</head>
<body>
<textarea style="width:200px;height: 200px" id="ta"></textarea>
<button id="btn">save</button>
</body>
</html>
其中使用到的app.js:
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(){
localStorage.text = ta.value;
// alert(ta.value);
}
}
用浏览器打开html文件显示的页面---审查元素---Resources---Local Storage中，可以看到缓存的内容。
3、Web存储-sessionStorage的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script src="app.js"></script>
</head>
<body>
<span id="txt">0</span>
<button id="addbtn">add</button>
</body>
</html>
其中使用到的app.js:
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;
}
[html] 学习笔记--Web存储的更多相关文章
- HTML5学习笔记 Web存储
HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...
- SQL反模式学习笔记12 存储图片或其他多媒体大文件
目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点: 1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...
- HTML学习之Web存储（五）
本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...
- 【C语言学习笔记】存储类、链接和内存管理
因为对内存管理部分一直没有很清楚的思路,所以一直在找资料想系统看一下这部分的内容.在C primer plus里看到了这一章,虽然大多都是心知肚明的东西,但是还是很多概念性系统性的东西让我眼前一亮,把 ...
- java学习笔记—web计算器（36）
MVC模式 模式主要的任务是帮助开发者解决一类问题. MVC模式主要是用于规划你的网站的开发的一个基本的结构. Servlet记住充当的是控制器层.cn.itcast.controller Java类 ...
- 安全学习笔记-web安全之XSS攻击
web安全之XSS攻击 XSS 即跨站脚本攻击,是 OWASP TOP10 之一.它的全称为 Cross-site scripting,因为 CSS 这个简称已经被占用表示为前端三剑客之一的CSS,所 ...
- AppCan学习笔记--数据存储及listview简单应用
AppCan AppCan开发平台简介 AppCan是Hybrid App开发框架即混合开发框架,有官方提供底层功能使用API HTML5和JavaScript只是作为一种解析语言,真正调用的都是Na ...
- sql 入门经典（第五版） Ryan Stephens 学习笔记 后续——存储引擎
一.引擎基础 1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎两种方法: a.show table status from database_name where na ...
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
目录 ASP.NET WEB API的出现缘由 ASP.NET WEB API的强大功能 ASP.NET WEB API的出现缘由 随着UI AJAX 请求适量的增加,ASP.NET MVC基于Jso ...
随机推荐
- 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 128階數的Shunt音量控制器
源:128階數的Shunt音量控制器 紅外線遙控 - 256階Shunt音量及控制及音源 選擇器
- Android线程之异步消息处理机制（三）——AsyncTask
Android的异步消息处理机制能够很完美的解决了在子线程中进行UI操作的问题,但是为了更加方便我们在子线程中对UI进行操作,Android还提供了另一个很好用的工具,AsyncTask就是其中之一. ...
- 怎么把自己电脑上开发的项目发布到自己电脑IIS上面？
windowsxp中: 步骤: 1.新建一个文件夹,把项目发布到里面(发布的时候需要注意的是: ) 注意:发布方法要选择:文件系统 目标位置选择:你新建来发布的那个文件夹名称 2.在IIS中新建网站 ...
- tp框架链接数据库的基本操作
<?php namespace Admin\Controller; use Think\Controller; class MainController extends Controller { ...
- 增量式PID的stm32实现（转）
源:增量式PID的stm32实现,整定过程 首先说说增量式PID的公式,这个关系到MCU算法公式的书写,实际上两个公式的写法是同一个公式变换来得,不同的是系数的差异. 资料上比较多的是: 还有一种是: ...
- ftp_get_file_and_directory
class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...
- 1）Javascript设计模式：Module模式
最简单的创建对象方法 function User(name) { this.name = name || '' } User.prototype.say = function() { console. ...
- jquery textarea输入字符字数提示
效果: html代码: <textarea id="assayInfo" name="assayInfo" rows="3" cols ...
- 微软2017MVP大礼包拆箱攻略
容我本周偷个懒,晒个大礼包就糊弄过去了.13号晚上拿到的大礼包,激动的没敢拆,一直等到娃睡着了,才偷偷打开了快递,忍了两天没忍住,上来晒图得瑟一下,请各位轻拍,谢谢! 1.大礼包的盒子(联邦快递的盒子 ...