HTML5学习笔记 Web存储
HTML5 web存储，一个比cookie更好的本地存储方式。
什么是html5 Web存储
使用HTML5可以在本地存储用户的浏览器数据。
早些时候，本地存储使用的是cookies.但是Web存储需要更加安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它可以存储大量数据，而不影响网站的性能。
数据以键值对存在，web网页的数据只允许该网页访问使用。
localStorage 和sessionStorage
localStorage ：没有时间限制的数据存储
sessionStorage：针对一个seeeion的灵气存储
在使用web存储前，应检查浏览器是否支持localStorage 和sessionStorage
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
localStorage对象存储的灵气没有时间限制，不会过期。
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
下面的实例记录了用户的点击次数
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
来看效果：
连接点击19次后，看 sessionStorage
再开一个选项卡看sessionStorage: 从图中可以看出，打开新的选项卡后，单击次数显示是1，意味着上一次单击的数并没有被记住。
同样看localStorage，localStorage单击了7次，
再开一个选项卡看效果：单击一次localStorage按钮，记录数显示8，在上一次的基础上加1.
完整的demo:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>LocalStorage</title>
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function clickCounter() {
if (typeof (Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
$('#result').html('');
$('#result').append('<p>' + sessionStorage.clickcount + '</p>');
}
else {
$('#result').text('抱歉您的浏览器不支持本地存储');
}
}
function clickCounter2() {
if (typeof (Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
}
else {
localStorage.clickcount = 1;
}
$('#result2').html('');
$('#result2').append('<p>' + localStorage.clickcount + '</p>');
}
else {
$('#result2').text('抱歉您的浏览器不支持本地存储');
}
}
</script>
</head>
<body>
<div>
<p>
<button onclick="clickCounter()" type="button">sessionStorage查看单击次数</button>
</p>
<div id="result"></div>
<p>单击按钮查看统计次数</p>
</div>
<div>
<p>
<button onclick="clickCounter2()" type="button">localStorage查看单击次数</button>
</p>
<div id="result2"></div>
<p>单击按钮查看统计次数</p>
</div>
</body>
</html>
本节完
HTML5学习笔记 Web存储的更多相关文章
- [html] 学习笔记--Web存储
HTML5 提供了两种在客户端存储数据的新方法之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效 ...
- HTML5学习(八)----Web存储
参考地址:http://www.w3school.com.cn/html5/html_5_webstorage.asp 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localS ...
- HTML5学习之Web存储
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- SQL反模式学习笔记12 存储图片或其他多媒体大文件
目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点: 1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5 学习笔记（三）——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
随机推荐
- iOS Masonry的使用需要注意的地方
自动布局最重要的是约束:UI元素间关系的数学表达式.约束包括尺寸.由优先级和阈值管理的相对位置.它们是添加剂,可能导致约束冲突 .约束不足造成布局无法确定 .这两种情况都会产生异常. 使用前:Auto ...
- STM32F401
The STM32F401 line is the entry level to the STM32 F4 series. It is designed for medical, industrial ...
- Spring Bean引用例子
在Spring,bean可以“访问”对方通过bean配置文件指定相同或不同的引用. 1. Bean在不同的XML文件 如果是在不同XML文件中的bean,可以用一个“ref”标签,“bean”属性引用 ...
- mysql 5.7源码安装
http://blog.itpub.net/29733787/viewspace-1590891/
- 实施CMMI3的体会
公司从去年年底开始实施CMMI3,记得当初上培训课的时候,听着老师介绍过程管理,项目管理,工程过程,支持过程这四大类过程域的时候,全部门上下听得稀里糊涂,从未想到这个鬼东西还这么复杂,这么麻烦. 公司 ...
- Android与Unity交互研究
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/46733221 Android与Unity交互研究 unity与android交互的由来 ...
- python接口自动化25-发xml格式post请求
前言 post请求相对于get请求多一个body部分,body部分常见的数据类型有以下四种(注意是常见的,并不是只有4种) application/x-www-form-urlencoded appl ...
- Neo4j 使用cypher语言进行查询
Neo4j是一个Java开发的图数据库,它将结构化数据存储在网络(从数学角度叫做图)上而不是表中.相对于关系数据库来说,图数据库善于处理大量复杂.互连接.低结构化的数据,这些数据变化迅速,需要频繁的查 ...
- hdu 1398
题目大意:输入是一个整数.输出他的拆分数(即拆分的方案数),本题与1028最大的不同之处就在于他的面额只能是整数的平方 代码如下: /* * 1398_1.cpp * * Created on: 20 ...
- Flume目录
1. Flume的安装配置 2. flume和kafka整合(转) 3. Flume NG 配置详解(转) 4. Flume-NG一些注意事项(转) 5. FLume监控文件夹,将数据发送给Kafka ...