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.跨页面与跨 ...
随机推荐
- Android EditText 限制输入为ip类型
editText.setInputType(InputType.TYPE_CLASS_NUMBER); String digits = "0123456789."; editTex ...
- javascritp 字符串截取
1.substring 方法 定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符. 语法 ? stringObject.substring(start,stop) 参数 ...
- jQuery如何获取动态添加的元素
1. 使用 on()方法 本质上使用了事件委派,将事件委派在父元素身上 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
- Delphi TFileStream 打开模式与共享模式
{ TFileStream create mode } fmCreate = $FF00; { Create a file with the given name. If a file with th ...
- WebService如何抛出干净的异常
转载:http://www.cnblogs.com/ahdung/p/3953431.html 说明:[干净]指的是客户端在捕获WebService(下称WS)抛出的异常时,得到的ex.Message ...
- Memcached源码分析——连接状态变化分析（drive_machine）
这篇文章主要介绍Memcached中,基于libevent构造的主线程和worker线程所处理连接的状态互相转换的过程(不涉数据的存取等操作),也就是drive_machine的主要业务逻辑了.状态转 ...
- Java：准备学习的高级主题
ClassLoader GC Concurrent Transaction JTA JPA JDBC JNDI JNI JNA JNative OSGI JMS JSTL EL Servlet NIO ...
- 一次delete速度异常慢的处理过程
InnoDB delete from xxx速度暴慢原因 博客分类: database MySQLPythonMobile多线程SQL step1,一个简单的联系人表 CREATE TABLE `c ...
- SPSS Clementine 数据挖掘入门1
SPSS Clementine是Spss公司收购ISL获得的数据挖掘工具.在Gartner的客户数据挖掘工具评估中,仅有两家厂商被列为领导者:SAS和SPSS.SAS获得了最高ability to e ...