【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 ...
随机推荐
- java appium客户端 6.1.0android长按及滑动变更
今天使用appium 6.1.0 java客户端,发现长按longpress(element),无法使用.如下代码在5.0.4 版本是可以正常运行的, WebElement noteDelete = ...
- Django--middleware 详解
面对的问题: 当我们的一个网站上线后有可能遇到一些恶意的访问.比如来自对手的web爬虫:我看过一些lowB的对手,它们IP地址都不换一个的,也不 在行为上做伪装. 1.可行方法一: 在每一个view中 ...
- CentOS 安装Mosquitto及测试
系统信息,阿里云服务器 安装工具 yum install gcc gcc-c++ yum install openssl-devel yum install c-ares-devel yum inst ...
- metaspolit 命令大全
一.msfconsole相关命令 二.database 三.autopwn自动化攻击工具 四.metaspolit常见渗透命令大全
- php分享二十六：读写日志
一:读写日志注意事项: 1:fgets取出日志行后,注意用trim过滤下 2:explode(“\t", $line) 拆分后,注意判断下个数是否正确,如果不正确,怎么处理? 如果某一列 ...
- tomcat重启步骤
tomcat重启步骤1.切换到tomcat目录cd /home/tomcat-home/tomcat-erp/bin2.关闭tomcatsh shutdown.sh3.启动tomcatsh start ...
- shell - 常识
一.用户登陆进入系统后的系统环境变量: $HOME 使用者自己的目录 $PATH 执行命令时所搜寻的目录 $TZ 时区 $MAILCHECK 每隔多少秒检查是否有新的信件 $PS1 在命令列时的提示号 ...
- iOS-一个弹出菜单动画视图开源项目分享
相似于Tumblr公布button的弹出视图 使用非常easy: 初始化: @property (nonatomic, strong) XWMenuPopView *myMenuPopView; - ...
- IOS 实现录音PCM转MP3格式（边录音边转码）
最近做的一个项目,项目中有个录音功能,采用的录音方法是IOS下的AVAudioRecorder.录音效果不错,但是录制的原生.pcm文件太大,每分钟大约10M左右. 找了下相关的音频压缩方法,用spe ...
- c# 除掉前三个字符，剩下的4个字符全为数字方为特殊车辆
string plate="粤BN1223"; if (plate.Contains("粤BN")) { //除掉前三个字符,剩下的4个字符全为数字方为特殊车辆 ...