博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5在客户端存储数据的新方法——localStorage
阅读量:4946 次
发布时间:2019-06-11

本文共 1600 字,大约阅读时间需要 5 分钟。

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).");
               

重置:

刷新页面会看到计数器在增长。
请关闭浏览器窗口,然后再试一次,计数器已经重置了。

document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
             

注意:nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储。

因此:在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined"){    // 是的! 支持 localStorage sessionStorage 对象!    // 一些代码.....} else {         // 抱歉! 不支持 web 存储。}

原文作者:祈澈姑娘

技术博客:

90后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

文末福利:关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群

转载于:https://www.cnblogs.com/ting6/p/9725801.html

你可能感兴趣的文章
c#网络通信框架networkcomms内核解析之一 消息传送
查看>>
Asp.net会话详解2——sessoin存储和配置
查看>>
C#中的类型相等与恒等(Equality & Identity)
查看>>
第三次作业
查看>>
nodejs中 图文混搭
查看>>
使用js控制文本超出部分显示省略号
查看>>
HDU ACM 1180 诡异的楼梯 (优先队列 + 广搜)
查看>>
深入理解css浮动
查看>>
Android 开发者福利Google Developers中国网站发布
查看>>
【模板】线段树 2
查看>>
《零基础入门学习Python》学习过程笔记【017函数】
查看>>
Block Demo
查看>>
LintCode Coins in a Line III
查看>>
Oracle定义varchar2()类型存储汉字的长度问题
查看>>
python 2.7 pip install plt 报错,应该是 pip install matplotlib
查看>>
C# 解压缩
查看>>
Centos7安装教程
查看>>
ABAP术语-ALE
查看>>
删除SVN信息
查看>>
IDEA 转移C盘 .IntelliJIdea 索引目录
查看>>