【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 ...
随机推荐
- macbook中vagrant升级新版本
macbook由于缺少卸载机制,有时候不知道该如何升级软件. vagant的升级到时简单,经测试,只需直接官网下载新软件,安装即可. 旧版本不用管,新的会直接替换.
- [转载]关于generate用法的总结【Verilog】
转载自http://www.cnblogs.com/nanoty/archive/2012/11/13/2768933.html Abtract generate语句允许细化时间(Elaboratio ...
- remoting生命周期
https://www.cnblogs.com/luomingui/archive/2011/07/09/2101779.html
- 【Unity】12.4 通过网格分层选择行进路线
开发环境:Win10.Unity5.3.4.C#.VS2015 创建日期:2016-05-09 一.简介 在具体的游戏情景中,通过分层可以控制物体的行进路线,比如哪些物体只能住水面上行进,哪些物体只能 ...
- javascript基础拾遗(一)
1.判断变量类型 var num = '123'; if(typeof num == 'number'){ alert('this is a number'); } else{ throw 'this ...
- python(41):copy拷贝(深拷贝deepcopy与浅拷贝copy)
Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1.copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2.copy.deepco ...
- (原)logstash-forwarder + logstash + elasticsearch + kibana
[logstash-forwarder + logstash + elasticsearch + kibana]-------------------------------------------- ...
- 如何优雅的退出/关闭/重启gunicorn进程
在工作中,会发现gunicorn启动的web服务,无论怎么使用kill -9 进程号都是无法杀死gunicorn,经过我一番百度和谷歌,发现想要删除gunicorn进程其实很简单. 1. 寻找mast ...
- 在IIS7上部署aspx网站
在IIS7上部署aspx网站 2016-12-06 1 示例代码 WebForm.aspx内容: <html> <head> <script language=" ...
- 域控制器修改IP操作步骤
域控制器更改IP 在DC运维时,可能会碰上需要调整域控制器IP的情况,下面的操作就是在Windows Server 2008环境下域控制器更改IP的完整操作步骤. 1. 使用管理员帐号登录域控制器,依 ...