[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 ...
随机推荐
- php 中的全局变量的理解
$GLOBALS 是php中的一个全局变量的数组. $GLOBALS['var1'] 代表的是 外部的全局变量 $var1 本身.global $var是外部$var的同名引用或者指针 例1: &l ...
- 关于在TabBar 中添加按钮,并通过block 或代理在控制器中实现响应
相信很多朋友会遇到在TabBar中添加按钮,并要求点击按钮能够实现一些功能,但是当我们自定义的时候,怎么才能在控制器中响应?通常我会用代理或者block,block性能更好,建议使用. 自定义TabB ...
- SecureCRT 密钥生成 SSH 使用密钥登陆 服务器
1.首先“Tool”-“Create Public Key” 2. 选择RSA 模式 4. 创建短语密码 5. 密钥长度为1024 6. 选择标准的 key , 下面是生成的路径 二 . 配置 SS ...
- (简单) POJ 3321 Apple Tree，树链剖分+树状数组。
Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...
- STM32的USART DMA传输（转）
源:STM32的USART DMA传输 问题描述: 我有一个需求,AD采得一定数目的数据之后,由串口DMA发出,由于AD使用双缓冲,所以每次开始DMA的时候都需要重新设置开始的内存地址以及传输的数目( ...
- WPF 制作电子相册浏览器
周末的时候,闲着无聊,做了一个电子相册浏览器.比较简单.界面如下: 主要部分代码如下: MainWindow.xaml <local:HeaderedWindow x:Class="P ...
- S3C2440的SPI解析
位串行数据的频率.如果只希望发送,则接收数据可以保持伪位(dummy).此外如果只希望接收,则需要发送伪位'1'数据 使用SPI主要需要以下寄存器 选择SPI模式,中断模式,查询模式等SCK选择,主从 ...
- 两端对齐justify
//容器设定text-align:justify.justify{ text-align: justify; } //容器里面的元素 .justify i{ width:24px; line-heig ...
- IOS开发－UI学习－使用代码创建button
使用代码创建button分5个步骤,分别是: 1.定义一个按钮,根据定义位置不同可定义为局部变量或者全局变量: 2.初始化按钮,一般使用一个矩形初始化: 3.设置按钮控件的其他属性,如背景图片,或者背 ...
- AtCoder Beginner Contest 052 ABCD题
A - Two Rectangles Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement The ...