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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

IJKPlayer编译so支持HTTPS的踩坑历程

同志,github来过没?右转不屑 ----> https://github.com/CarGuo

2243
来自专栏黑白安全

iOS安全基础之钥匙串与哈希

本文最初是由Chris Lowe编写的,后来经过Ryan Ackermann(ios系统开发者)的修改,已经可以针对最新的Xcode 9.2,Swift 4,i...

1132
来自专栏coding

swoole框架-swoft实现程圣母与云天明对话功能启动ws服务创建http服务的聊天控制器创建视图文件创建ws控制器结果演示

当万有引力号启动广播按钮,向宇宙发送三体星的坐标时,地球已经失去了任何侵略价值。三体人将所有在地球的资源全部撤走,但在临别时,安排了程圣母与云天明的远程会话。接...

2052
来自专栏pangguoming

最火的Android开源项目整理

一、代码库 1、from  代码家 整理比较好的源码连接 ***************************************************...

8414
来自专栏我的安全视界观

[一起玩蛇】Python代码审计中的器II

3037
来自专栏文武兼修ing——机器学习与IC设计

AXI学习笔记-11.AXI总线结构2.AXI接口时序3.数据结构4.传输特性

握手信号包括VALID和READY信号,传输行为仅在VALID和READY同时有效时发生。其中:

5223
来自专栏程序员宝库

localStorage 还能这么用

HTML5中 Web Storage 的出现,主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小,而且数据会自动携带到请求头...

1664
来自专栏菩提树下的杨过

mac OS X Yosemite 上编译hadoop 2.6.0/2.7.0及TEZ 0.5.2/0.7.0 注意事项

1、jdk 1.7问题 hadoop 2.7.0必须要求jdk 1.7.0,而oracle官网已经声明,jdk 1.7 以后不准备再提供更新了,所以趁现在还能下...

2088
来自专栏FreeBuf

打开文件夹就运行?COM劫持利用新姿势

*本文原创作者:菠菜,本文属FreeBuf原创奖励计划,未经许可禁止转载 打开文件夹就能运行指定的程序?这不是天方夜谭,而是在现实世界中确实存在的。利用本文探讨...

2548
来自专栏全栈开发

webpack构建优化:bundle体积从3M到400k之路

在CQM平台开发时,把demo网站给同事体验,都纷纷反馈第一次打开页面的时候需要等待很久,页面一直在转菊花。作为一个为韩国头部厂商提供优质服务的网站,接到这种反...

7144

扫码关注云+社区

领取腾讯云代金券