HTML5在客户端存储数据的新方法——localStorage
HTML5在客户端存储数据的新方法——localStorage
localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。
在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。
localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。
cookie、 sessionStorage 、localStorage之间的区别和使用
cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
使用场景：
localStorage可以用来统计页面访问次数。
sessionStorage可以用来统计当前页面元素的点击次数。
cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。
使用实例：
刷新页面会看到计数器在增长。请关闭浏览器窗口，然后再试一次，计数器会继续计数。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
document.write("Visits "+ localStorage.pagecount + " time(s).");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
</html>
重置：
刷新页面会看到计数器在增长。
请关闭浏览器窗口，然后再试一次，计数器已经重置了。
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
</html>
注意：nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储。
因此：在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
HTML5在客户端存储数据的新方法——localStorage的更多相关文章
- HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()
HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...
- HTML5中两种方法实现客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- HTML5 客户端存储数据的两种方式
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- Android应用开发SharedPreferences存储数据的使用方法
Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的 ...
- 【Mark】Android应用开发SharedPreferences存储数据的使用方法
Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的 ...
- HTML5之客户端存储（Storage）
关于客户端存储技术 storage 一.关于客户端(浏览器)存储技术 浏览器的存储技术第一个能想到的应该就是cookie,关于cookie本身出现的初衷是为了解决客户端识别,可存储信息量小(4k左右) ...
- JavaScript+IndexedDB实现留言板：客户端存储数据
之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...
- 关于SharedPreferences存储数据的使用方法
SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的就是一个key-value(键值对)SharedPreferences常用来 ...
- CentOS7下rsync服务端与Windows下cwRsync客户端实现数据同步配置方法
最近需求想定期备份服务器d盘的数据到Linux服务器上面,做个笔记顺便写下遇到的问题 以前整过一个win下的cwrsync(客户端)+rsync(服务端:存储)的bat脚本 和整过一个Linux下的r ...
随机推荐
- git 当出现 devirge 时，一个是commit的提交顺序不对
进入新分支1.git pull origin branchname 2.修改 3.git add . 4.git commit 5. git pull 6.git push 出现分歧要,就版本回退, ...
- GO语言学习（十二）Go 语言函数
Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...
- PatentTips - Resource partitioning and direct access utilizing hardware support for virtualization
BACKGROUND The present disclosure relates to the resource management of virtual machine(s) using har ...
- OC内存管理总结,清晰明了!
<span style="font-size:18px;">OC内存管理 一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限.所以每一个APP所占的 ...
- uva 10098 Generating Fast(全排列)
还是用的两种方法,递归和STL,递归那个是含有反复元素的全排列,这道题我 没有尝试没有反复元素的排列,由于从题目上并没有发现一定是有反复元素的() 贴代码: <span style=" ...
- 浅谈Normalize.css
浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...
- HttpWatch--time chart分析
这是一个IE的插件,下载可以点这里.下载后解压如下图所示,一共有4个文件.HttpWatch Professional是单独软件,可以单独使用. 解压后有四个文件 插件安装时,只需运行httpwatc ...
- Redis实现Mybatis的二级缓存
一.Mybatis的缓存 通大多数ORM层框架一样,Mybatis自然也提供了对一级缓存和二级缓存的支持.一下是一级缓存和二级缓存的作用于和定义. 1.一级缓存是SqlSession级别的缓存.在操作 ...
- ubuntu, 修改hosts文件
介绍下ubuntu下修改host实现域名指向本地的方法. Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结 ...
- JAVA 如何将String进行大小写转换
private String convertString(String str, Boolean beginUp){ char[] ch = str.toCharArray(); StringBuff ...