为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地。例如,用户登录token,或者一些不经常变动的数据。

随着HTML5的到来,出现了诸如AppCache、localStorage、sessionStorage和IndexedDB等等的技术。

他们有各自适应的场景。我这里主要介绍一下localStorage,以及sessionStorage。

localStorage和sessionStorage都是以一个键值对的方式来保存值,最大容量是5M。(5M对于我们来说,缓存一下少量的数据还是够用的了)

localStorage和sessionStorage都提供了简单的增删改查api方便我们存储,getItem,setItem,clear...,等。

localStorage和sessionStorage都是以字符串的形式保存起来

localStorage和sessionStorage的区别主要在于生命周期的不同。localStorage是永久性的,而sessionStorage则会在session结束的时候被清空

在我们的实际应用中,经常会碰到这样的需求:

  • 保存对象
  • 保存确定过期时间的值
  • 更新对象
  • 获取当前保存内容的大小
  • 判断当前是否已经存在该key

这样的需求,通过系统提供的api,实现起来虽不算复杂,但总有点繁琐!

以下是我的解决办法:

  • 保存对象
    set的时候,判断是否为对象,如果是,则自动调用JSON.strigfy(data),将其转为字符串再保存。
    get的时候,如果是对象,则将data用JSON.parse转换成对象,再返回出去,
  • 保存有过期时间的值
    set的时候,如果有过期时间,则自动保存过期时间。
    get的时候,则判断是否过期,过期则返回null
  • 更新对象
    无需调用get获取数据,修改之后,在set回去。
    通过封装一个update的方法来解决
  • 判断当前是否已经存在该key
    通过遍历离线存储中所有的key,来判断是否存在

以上这些场景都是平时比较多到的,所以将其封装起来。减少代码的冗余!后期也能更好的维护!

如果赞同我所说的,请点一下下方的推荐。如果有其他问题,请多多指教~

这是这个库的gitHub地址:https://github.com/chen4342024/StoreLib/blob/master/README.md,欢迎star和fork

html5离线存储的更多相关文章

  1. 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  2. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  3. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  4. html5 离线存储 worker

    html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...

  5. 神奇的HTML5离线存储(应用程序缓存)

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  6. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  7. 利用Node实现HTML5离线存储

    前言 支持离线Web应用开发是HTML5的一个重点.离线Web应用就是在设备不能上网的时候仍然可以运行的应用.开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css ...

  8. HTML5离线存储的工作原理和使用

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...

  9. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

随机推荐

  1. 关于编程语言(转/收藏)-原文作者:韩天峰(Rango)

    原文在这里:http://rango.swoole.com/archives/405 容易让人记住的文章,要么引起共鸣,要么催人奋进.一句话,你已走过,而我也在路上. 最近群里很多朋友询问我是如何学习 ...

  2. 在Activity中设置new出来的TextView属性

    //创建一个TextView---->textView TextView textView = new TextView(this);   // 第一个参数为宽的设置,第二个参数为高的设置 te ...

  3. Dalvik opcodes

    原文地址: http://pallergabor.uw.hu/androidblog/dalvik_opcodes.html Dalvik opcodes Author: Gabor Paller V ...

  4. Bootstrap 2.3.2学习

    1.下载架包,下载编译好的文件,文件目录结构如下所示: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ ...

  5. 【转】利用DCC32实现命令行批量编译

    *.dof [Compiler] A=1 B=0 C=1 D=1 E=0 F=0 G=1 H=1 I=1 J=1 K=0 L=1 M=0 N=1 O=1 P=1 Q=0 R=0 S=0 T=0 U=0 ...

  6. android 利用TrafficStats类获取本应用的流量

    public void getData() { // PackageManager 包管理类 PackageManager packageManager = BrownserActivity.this ...

  7. openSUSE13.1无法打开Yast的安装/移除软件管理软件的解决办法·(未解决,临时方法) 收获:有问题,读日志

    看了日志发现错误在于Ruby,新的YaST是基于Ruby的,而我用rvm安了新版本Ruby,日志里这么出错: 2014-08-22 20:20:57 <3> linux-vfpp.site ...

  8. ED/EP系列5《消费指令》

    1. 消费交易 消费交易允许持卡人使用电子存折或电子钱包的余额进行购物或获取服务. 特点: 1) --可以在销售点终端(POS)上脱机进行 2) --使用电子存折进行的消费交易必须提交个人识别码(PI ...

  9. SQLite判断某表是否存在

    SQLite判断表是否存在:其实很简单,只要查看sqlite_master表中是否存在这条数据就可以知道了.SELECT count(*) FROM sqlite_master WHERE type= ...

  10. makefile复习时发现的编写makefile规则注意事项

    博客中关于makefile的博文数不胜数,比较经典的都很相似,下面这一片,很全面,只是很长,可以作为参考资料:http://blog.csdn.net/liang13664759/article/de ...