[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 1811 Rank of Tetris 拓补排序+并查集
Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) [ ...
- (简单) POJ 2352 Stars，Treap。
Description Astronomers often examine star maps where stars are represented by points on a plane and ...
- IOS开发中AVFoundation中AVAudioPlayer的使用
IOS开发中如何调用音频播放组件 1.与音频相关的头文件等都在AVFoundation.h中,所以第一步是添加音频库文件: #import <AVFoundation/AVFoundation. ...
- make执行过程
转载自 陈皓<跟我一起写 Makefile> 一般来说,最简单的就是直接在命令行下输入make命令,make命令会找当前目录的makefile来执行,一切都是自动的.但也有时你也许只想让m ...
- 【解决】System.Web.Http.Description 缺失
一.问题描述 使用visual studio 2013创建mvc4 api模板,然后build,run,broken,出错如下: Error 1 The type or namespace name ...
- [转]centos 6.5安装caffe
centos 6.5安装caffe 原文地址:http://blog.csdn.net/wqzghost/article/details/47447377 总结:在安装protobuf,hdf5等 ...
- MySQL-基本sql命令
关于环境的搭建和数据库的连接,我直接跳过,假设电脑上已经安装好了MySQL的环境,接下来直接进行数据库的操作:(虽然数据库不区分大小写,但是本文约定:命令用大写,用户变量和字段用小写) 1.创建数据库 ...
- 【转】Android ListView加载不同的item布局
原创教程,转载请保留出处:http://www.eoeandroid.com/thread-72369-1-1.html 最近有需求需要在listView中载入不同的listItem布局,开始 ...
- poi2007
序:为什么写poi,zy说poi都是思路题目,不像hnoi妈的数据结构队..... 1.bzoj1102 题目大意:定义了一个山谷和山峰,求他们数量. 题解:这种题bfs咯,在bfs的时候记录一下相邻 ...
- cf734 E. Anton and Tree
这个题的题意还是很劲的.搞了好久才知道是怎么变得. (假设已经缩好了点,每次边中间颜色不同的,然后和就和他外面的相同,继续再变这个大的,依次类推,最多就是树的直径D/2) (还是英语水平太弱了(吐槽+ ...