【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 ...
随机推荐
- MySQL与Oracle之间互相拷贝数据的Java程序
因为工作需要,先是需要将一个小型的MySQL数据库中的数据拷贝到Oracle中:近期又有需要将一个中型的Oracle数据库拷贝到MySQL中.曾经找过网上各种转换工具,大多收费的,自己写个吧,还一切可 ...
- [na]完全理解icmp协议
1.ICMP出现的原因 在IP通信中,经常有数据包到达不了对方的情况.原因是,在通信途中的某处的一个路由器由于不能处理所有的数据包,就将数据包一个一个丢弃了.或者,虽然到达了对方,但是由于搞错了端口号 ...
- 深入理解Linux内核－页高速缓存
页高速缓存:1.磁盘高速缓存的一种 2.一种对完整的数据页进行操作的磁盘高速缓存.3.将一页数据写到块设备的时候,内核首先检查对应的页是否已经在高速缓存中,不在就添加并填充数据.4.I\O数据的传送并 ...
- Shell中整数比較
-eq 等于,如:if ["$a" -eq "$b" ] -ne 不等于,如:if ["$a" ...
- gf框架之grpool - 高性能的goroutine池
Go语言中的goroutine虽然相对于系统线程来说比较轻量级,但是在高并发量下的goroutine频繁创建和销毁对于性能损耗以及GC来说压力也不小.充分将goroutine复用,减少goroutin ...
- haproxy 配置https 同时技持443 80端口
确定haproxy支持https [root@c01 sbin]# ldd haproxy |grep ssl libssl.so.10 => /usr/lib64/libssl.so.10 ( ...
- yum rpm 命令一运行就卡住 只有kill 掉
由于rpm的数据库出现异常导至直接卡死,造成这种异常是因为之前不正常的安装或查询. 解决方法: # rm -f /var/lib/rpm/__db.00* #删除rpm数据文件 # rpm --reb ...
- OpenStack大规模部署详解
https://blog.csdn.net/karamos/article/details/80130443 0.前言今年的2月22日,OpenStack发布了15个版本Ocata. 走过了7年的发展 ...
- react-scripts的css modules
用create-react-app创建的项目基于react-scripts内建支持css modules,需要把css文件名改成filename.module.css,导入方式需要改成: import ...
- Linux 守护进程
1.什么是守护进程 守护进程daemon指的是在后台运行的进程 2.前台任务和后台任务 前台任务:独占命令行窗口,运行完毕或手动终止,才能执行其他命令 以redis服务为例 redis-server ...