[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 ...
随机推荐
- OC语言的特性(二)-Block
本篇文章的主要内容 了解何谓block. 了解block的使用方法. Block 是iOS在4.0版本之后新增的程序语法. 在iOS SDK 4.0之后,Block几乎出现在所有新版的API之中,换句 ...
- CSU 1515 Sequence
莫队算法+map #include<cstdio> #include<cstring> #include<cmath> #include<map> #i ...
- JVM线程安全
一.线程的调度方式 线程调度分为两种方式: 协同式调度和抢占式调度.协同式调度:线程的执行时间由线程本身控制,线程将工作执行完之后,通知操作系统切换到其他线程上.缺点:时间不可控,就算出问题,也不会通 ...
- (简单) HDU 5154 Harry and Magical Computer，图论。
Description In reward of being yearly outstanding magic student, Harry gets a magical computer. When ...
- yield return 和yield break
这个还是有点意思,两个都是有返回的意思,但是区别在哪里呢? 1.return 会销毁函数的局部变量,下次调用的时候又会产生新的值 2.yield 当退出函数的时候,变量人然存在,函数下次调用的时候变量 ...
- js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项
// 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...
- php包管理工具最基本的一些问题
windows下的 1.先安装windows下的set-up程序 点击一步步的, cmd进入,输入composer能成功显示一幅图说明安装成功 2.在下载,https://getcomposer.or ...
- 3）Java学习笔记：内部类
什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...
- windy数（bzoj 1227）
Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? In ...
- Html 定位position
CSS position属性和实例应用 目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和 ...