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.跨页面与跨 ...
随机推荐
- Java 常用远程调用协议比较
一.综述本文比较了RMI,Hessian,Burlap,Httpinvoker,web service等5种通讯协议的在不同的数据结构和不同数据量时的传输性能.RMI是java语言本身提供的远程通讯协 ...
- Java中应该返回零长度数组或空集合，而不是返回null（转）
说明:为了避免在数组和集合的获取上增加null的判断,同时也能减少不必要的空指针异常,通常会在业务返回零数组或空集合. 方法: 1.数组: 定义全局静态常量来减少内存开销:private static ...
- JProfiler 5.1.4的使用方法
1. JProfiler运行环境配置 安装目录结构如下,子目录中显示了支持的操作系统: 在服务器和客户端都要安装JProfiler,并且要安装License,在分析工具客户端中进行安装.Windows ...
- poj 3131 双向搜索+hash判重
题意: 初始状态固定(朝上的全是W,空格位置输入给出),输入初始状态的空格位置,和最终状态朝上的位置,输出要多少步才能移动到,超过30步输出-1. 简析: 每一个格子有6种状态,分别是 0WRB, 1 ...
- 解决Visual Studio 2010 “无法导入以下密钥文件” 错误
错误原文: "错误 1 无法导入以下密钥文件: SamplePlugin.pfx.该密钥文件可能受密码保护.若要更正此问题,请尝试再次导入证书,或手动将证书安装到具有以下密钥容器名称的强名称 ...
- Google Chrome 39.0.2171.71 正式发布
Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器.该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性.速度和安全性,并创造出简单且 ...
- 对java3d的位置理解
以一个圆柱体为例: 圆柱体的一个特征点假设为(0,0,0),如下图示: 当特征点变为(0,0.4f,0)时,我们看到的圆柱体就如下所示: 当特征点变为(0,0.8f,0)时,我们看到的圆柱体就如下所示 ...
- java获取系统进程号
public static final int jvmPid() { try { RuntimeMXBean runtime = ManagementFactory.getRuntimeMXBean( ...
- 在Qt示例项目的C ++ / QML源中的//！ [0]的含义是什么？
在Qt示例项目的C ++ / QML源中的//! [0]的含义是什么? 例如: //! [0] GLWidget :: GLWidget(Helper * helper,QWidget * pare ...
- Proxmark3介绍
Proxmark3介绍 Proxmark3是由Jonathan Westhues设计并且开发的开源硬件,其主要用RFID的嗅探.读取以及克隆等的操作. 其官方网站为:Jonathan Westhues ...