html5离线存储

为了提升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