[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 ...
随机推荐
- HDU 4081 Qin Shi Huang's National Road System 次小生成树变种
Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...
- 让MySQL数据库支持Emoji表情
问题:Emoji 表情是按照4个字节存储的,所以传统 mysql utf-8编码只能最大存储3字节. 解决:修改MySQL(5.5.3以上版本) 编码为utf8mb4 即可存储Emoji表,同时设置 ...
- Android非常实用的开源项目框架
我将文章中所描述的项目都集成在一个apk中,可以直接运行查看效果,2.2以上的机器都可以运行.因为不让直接上传apk文件,我压缩成了zip包 1. Universal-Image-Loader 实现异 ...
- 基于LNMP的Zabbbix之Zabbix Server源码详细安装，但不给图
Zabbix Server安装 看到那里有错或者有什么问题的话,求指点 邮箱:losbyday@163.com 上一篇PHP源码安装参见基于LNMP的Zabbbix之PHP源码安装:https://i ...
- 顽强的的砂锅之——深究finally代码块与return语句的执行顺序！
当问到finally代码块的执行顺序,就算刚刚学编程的小白都能毫不犹豫的说出答案:不管异常发生与否,finally语句块的代码一定会被执行!大体上这样讲是没有错,但是finally块中的代码一定会有效 ...
- set multiset 集合实现众数的统计
众数问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...
- (简单) POJ 3468 A Simple Problem with Integers , 线段树+区间更新。
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- eclipse注释模板设置（未整理）
Window --> Java --> Code Style --> Code Templates --> Comments --> types --> Edit ...
- 【转】23种设计模式UML图
原文:http://blog.csdn.net/bwwlpnn/article/details/7421628
- 机器人局部避障的动态窗口法(dynamic window approach) （转）
源:机器人局部避障的动态窗口法(dynamic window approach) 首先在V_m∩V_d的范围内采样速度: allowable_v = generateWindow(robotV, ro ...