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的更多相关文章

  1. HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

  2. HTML5中两种方法实现客户端存储数据

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  3. HTML5 客户端存储数据的两种方式

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  4. Android应用开发SharedPreferences存储数据的使用方法

    Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的 ...

  5. 【Mark】Android应用开发SharedPreferences存储数据的使用方法

    Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的 ...

  6. HTML5之客户端存储（Storage）

    关于客户端存储技术 storage 一.关于客户端(浏览器)存储技术 浏览器的存储技术第一个能想到的应该就是cookie,关于cookie本身出现的初衷是为了解决客户端识别,可存储信息量小(4k左右) ...

  7. JavaScript+IndexedDB实现留言板：客户端存储数据

    之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...

  8. 关于SharedPreferences存储数据的使用方法

    SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的就是一个key-value(键值对)SharedPreferences常用来 ...

  9. CentOS7下rsync服务端与Windows下cwRsync客户端实现数据同步配置方法

    最近需求想定期备份服务器d盘的数据到Linux服务器上面,做个笔记顺便写下遇到的问题 以前整过一个win下的cwrsync(客户端)+rsync(服务端:存储)的bat脚本 和整过一个Linux下的r ...

随机推荐

  1. mycat快速体验（转）

    横空出世的MyCat截至到2015年4月,保守估计已经有超过60个项目在使用,主要应用在电信领域.互联网项目,大部分是交易和管理系统,少量是信息系统.比较大的系统中,数据规模单表单月30亿.本人也初步 ...

  2. 【Codeforces Round #442 (Div. 2) C】Slava and tanks

    [链接] 我是链接,点我呀:) [题意] 有n个位置,每个位置都可能有不定数量的tank; 你每次可以选择一个位置投掷炸弹. 并且,这个位置上的所有tank都会受到你的攻击. 并且失去一点体力. 然后 ...

  3. Java基础学习总结(50)——Java事务处理总结

    一.什么是Java事务 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID原则.ACID是原子性(atomicity).一致性(consistency).隔离性(isol ...

  4. maven 配置Project Facets时further configuration available不出来问题

    如果下边的 further configuration available不出来 把Dynamic web module 去掉勾选,应用与项目,然后再点开项目的properties,再选中Dynami ...

  5. vue指令应用--实现输入框常见过滤功能

    前端开发最常碰到的就是输入框,经常要做各种验证,本公司惯用的需求是直接屏蔽特定字符的输入,如禁止非数字输入,特殊符号输入,空格输入等,这些功能反复使用,做成指令的形式,直接调用,非常方便,上代码: 目 ...

  6. windows下, nginx 提示错误 "No input file specified"

    https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80386035

  7. 【例题5-6 UVA 540 】Team Queue

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用两个队列模拟就好. 记录某个队在不在队列里面. 模拟 [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] #in ...

  8. java项目中VO和DTO以及Entity，各自是在什么情况下应用的

    j2ee中,经常提到几种对象(object),理解他们的含义有助于我们更好的理解面向对象的设计思维.     POJO(plain old java object):普通的java对象,有别于特殊的j ...

  9. Geodatabase模型

    原文 Geodatabase模型 地理数据模型是地理实体及其关系的形式化抽象和数学描述.随着数据库.面向对象等技术的发展,面向对象的地理数据模型成为大型空间数据库的首选方案,它克服了传统地理数据模型的 ...

  10. php对xml进行简单的增删改查（CRUD）操作

    假如有以下xml文件: <?xml version="1.0" encoding="UTF-8"? > <setting>     &l ...