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 ...
随机推荐
- .NET中StringBuilder用法实例分析
string s1 = "33"; string s2 = "44"; string s3 = "55"; //需求是把s1 s2 s3拼接 ...
- Java Web学习总结（13）——JSP入门
一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...
- ajax的get请求与编码
window.onload = function(){ document.getElementById('username').onblur = function(){ var name = docu ...
- !!在JS中代表什么
!!一般用来将后面的表达式转换为布尔型的数据(boolean), javascript约定和c类似,规则为 ·false.undefinded.null.0."" 为 false, ...
- Js里面的arguments
了解这个对象之前先来认识一下javascript的一些功能: 其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载.Javascrip中国每个函数都会有一个Argume ...
- 【Codeforces Round #442 (Div. 2) C】Slava and tanks
[链接] 我是链接,点我呀:) [题意] 有n个位置,每个位置都可能有不定数量的tank; 你每次可以选择一个位置投掷炸弹. 并且,这个位置上的所有tank都会受到你的攻击. 并且失去一点体力. 然后 ...
- [D3] Better Code Organization with selection.call() with D3 v4
Most of D3’s native selection APIs also return the selection (or a new selection), to enable multipl ...
- [Angular] Intercept HTTP requests in Angular
Being able to intercept HTTP requests is crucial in a real world application. Whether it is for erro ...
- uvalive 6393(uva 1572) Self-Assembly 拓扑排序
题意: 给出一些正方形,这些正方形的每一条边都有一个标号.这些标号有两种形式:1.一个大写字母+一个加减号(如:A+, B-, A-......), 2.两个0(如:00):这些正方形能够任意翻转和旋 ...
- Hadoop读书笔记（一）Hadoop介绍
1.Hadoop是什么? 适合大数据的分布式与计算平台. HDFS:Hadoop Distributed File System 分布式文件系统 MapReduce:并行计算框架 2.HDFS的架构 ...