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.跨页面与跨 ...
随机推荐
- Spring JavaConfig实例
从Spring 3起,JavaConfig功能已经包含在Spring核心模块,它允许开发者将bean定义和在Spring配置XML文件到Java类中. 但是,仍然允许使用经典的XML方式来定义bean ...
- 创建自己的Repo Server
非常久曾经出于好奇细致了解了下Repo及server的原理,可是今天突然发现有些忘了.于是想记录下来. Repo机制 Repo是google官方为管理Android项目开发出来的一个软件. 我们先来看 ...
- SqlServer收缩数据库语句
ALTER DATABASE [Spacebuilder] SET RECOVERY SIMPLEDBCC SHRINKDATABASE([Spacebuilder], 0)ALTER DATABAS ...
- 剑客vs刀客 Java vs .NET
刀,无鞘的刀,重三十六斤六两三分,刀重而不大,重而不笨,千年寒铁精炼而成,刀身颀长,刀背轻薄,锋利异常,刀身桔黄色,隐隐泛着青色,刀面嵌龙凤图案,似龙吟,似凤鸣.刀柄带有两环,轻轻撞击会发出" ...
- Ext表格控件
表格控件其实也就是帮我们完成了数据的填充工作而已,具体的数据源.要显示的列,列的定制.数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的,所以我们分下面几步来完成网格控件的数据绑定: 1 ...
- win7 64位搭建scrapy(转)
win7 64位系统依赖的scrapy文件链接:http://pan.baidu.com/s/1mgJS7BM 一个很好的python 64位包下载页面:http://www.lfd.uci.edu/ ...
- OpenShift和F5的集成手册
OpenShift和F5的集成步骤,记录如下,如实际操作中有变更会再度编辑修改. 1.整体架构 使用BIG-IP作为Openshift的Router,能实现以下功能: 为Services创建BIG-I ...
- jenkins错误413 Request Entity Too Large<
jenkins-nginx--sonar1/sonar2
- Converting a fisheye image into a panoramic, spherical or perspective projection [转]
Converting a fisheye image into a panoramic, spherical or perspective projection Written by Paul Bou ...
- Tensorflow之调试(Debug) && tf.py_func()
Tensorflow之调试(Debug)及打印变量 tensorflow调试tfdbg 几种常用方法: 1.通过Session.run()获取变量的值 2.利用Tensorboard查看一些可视化统计 ...