【html5】html5 本地存储
最近一直在学习 html5，为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要介绍下 html5 的本地存储。
在客户端存储数据
html5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对 session 的数据存储，一旦窗口关闭就没有了
两个方法用法完全一样，下面就以 localStorage 为例。
为什么要用本地存储
早期我们都是使用 cookie 来完成的，但是 cookie 不适合大量的数据存储，也就是说它太小，只有 4k 的样子，而且速度慢效率低。
localStorage 方法
那么我们该如何添加数据呢？很简单，就像给对象添加属性一样：
localStorage.pageLoadCount = 1;
可以通过浏览器的控制台来查看是否有存储数据：
同样读取和修改数据也很方便：
console.log(localStorage.pageLoadCount); //读取
localStorage.pageLoadCount = 10; //修改
console.log(localStorage.pageLoadCount); //读取
以下是结果：
当然 localStorage 本身自带一些方法及属性，具体如下：
localStorage.clear(); //清除所有的存储数据
localStorage.getItem('pageLoadCount'); //读取存储数据，返回值 "10"，等同于 localStorage.pageLoadCount
localStorage.key(0); //获取存储数据的 key，返回值 "pageLoadCount"
localStorage.length; //获取存储数据的长度
localStorage.removeItem('pageLoadCount'); //删除特定的存储数据
localStorage.setItem('name','Jack'); //新增加一个存储数据，等同于 localStorage.name = 'Jack';
需要注意的是：读取存储数据的时候，返回的是字符串，无论之前存的是什么，最后读取的都是字符串，所以读取的时候需要进行类型转换。
最后附上 localStorage 应用的 demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>localStorage</title>
</head>
<body>
<p id="p"></p>
</body>
</html>
<script>
window.onload = function(){
if(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0;
localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
document.getElementById('p').innerHTML = '浏览次数：' + localStorage.pageLoadCount + ' 次。';
}
</script>
参考资料：
【html5】html5 本地存储的更多相关文章
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- HTML5的本地存储 LocalStorage
localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...
- 【转】HTML5 LocalStorage 本地存储
原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查
大家好!我是范范.本人刚接触ST2到现在刚刚两个月,6月1号接的项目,那时才知道有Sencha Touch2这个东西,到现在两个月了期间的幸酸就不说了.今天说说在项目中用到的HTML5的本地存储.可能 ...
- HTML5 LocalStorage 本地存储总结
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"] ...
- HTML5 LocalStorage 本地存储（转）
原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...
- HTML5 LocalStorage 本地存储原理详解
首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...
- HTML5 LocalStorage 本地存储，刷新值还在
H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStorage会话存储,页面关闭数据就会丢失. 使用方法: localStor ...
随机推荐
- Python 爬虫编码格式问题 gb2312转换utf8
遇到的问题是:爬取网页得到的结果如下(部分) 里面的中文出现乱码. <!DOCTYPE html> <html lang='zh-CN'> <head> < ...
- MySql（二）：MySql架构组成
主要架构就是这张图展示的 具体细节看下面文章: MySql 物理文件组成 MySQL 自带工具使用介绍 Mysql Server系统架构介绍
- DCOS中监控和弹性伸缩方案经验
监控的选型 我们的DCOS 主要是面向2种业务形态:互联网应用,NFV组件和相关的数据库.2种不同的业务虽然说都是跑在容器内部,但是其实需要监控的信息和指标都是各不相同.因此在选择监控方案的时候我们更 ...
- PreparedStatement用途
关于PreparedStatement接口,需要重点记住的是:1. PreparedStatement可以写参数化查询,比Statement能获得更好的性能.2. 对于PreparedStatemen ...
- [vt][xen]xenserver初始安装增加第二块硬盘&xen图形界面安装vm&设置xen里vm开机启动
为XenServer挂载/增加第二块硬盘的方法 注意: xen6.x和xen7.x vm导出导入是不兼容的.这点有点蛋疼 新买机器后安装xenserver(一般都买刻录机+dvd来刻录xen官网的io ...
- 【Unity】6.8 Quaternion类（四元数）
分类:Unity.C#.VS2015 创建日期:2016-04-20 一.四元数的概念 四元数包含一个标量分量和-个三维向量分量,四元数Q可以记作: Q=[w,(x,y,z)] 在3D数学中使用单位四 ...
- Pycrypto与RSA密码技术笔记
密码与通信 密码技术是一门历史悠久的技术.信息传播离不开加密与解密.密码技术的用途主要源于两个方面,加密/解密和签名/验签 在信息传播中,通常有发送者,接受者和窃听者三个角色.假设发送者Master想 ...
- 在javascript中获取一个对象内属性的个数
var foo = {a1:'1',a2:'2',a3:'3'}; //获得对象所有属性的数组 Object.getOwnPropertyNames(foo); > [ 'a1', 'a2', ...
- python管道pipe
1.什么是管道 Linux进程间通信方式的一种,管道有两端,读端和写端.创建管道,然后从父进程fork出子进程, 父进程和子进程拥有共同的读写文件描述符,可以实现子进程写文件,父进程读文件的操作. 示 ...
- python（44）：array和matrix的运算
在NumPy中,array用于表示通用的N维数组,matrix则特定用于线性代数计算.array和matrix都可以用来表示矩阵,二者在进行乘法操作时,有一些不同之处. 使用array时,运算符 * ...