V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
milklee
V2EX  ›  分享创造

添加了缓存功能与命名空间的 localStorage 与 sessionStorage

  •  
  •   milklee · 2016-06-30 16:43:27 +08:00 · 2821 次点击
    这是一个创建于 3067 天前的主题,其中的信息可能已经有所发展或是发生改变。

    做前端的同学对 localStorage 与 sessionStorage 都不陌生吧?查看 MDN 的简介

    我个人认为,原生的 localStorage 与 sessionStorage 有以下缺点:

    • 只能存储字符串。所以我们经常要手动 JSON.parseJSON.stringify
    • 没有命名空间。为了避免冲突,我们经常需要自定义一个“前缀”,比如 localStroage.setItem('home-' + key, value)
    • 每次都直接从 localStorage 或 sessionStorage 里读取值的话,性能比较低。有一个缓存层会好很多

    如果有了上面提到的“命名空间”和“缓存层”的话:

    • 有了缓存层,我们甚至可以先把值保存进缓存里,等到网页关闭(即触发 window.onunload 事件时)再存进 localStroage 里
    • 有了命名空间,我们就可以只删除此命名空间下的数据,而不是整个清空 localStorage 与 sessionStorage

    基于以上几点,我开发了 NamedStorage

    • JSON 友好
    • 缓存层
    • 命名空间
    • "懒保存"

    详情见 GitHub 主页: https://github.com/lmk123/NamedStorage

    欢迎点赞和提 issue !

    6 条回复    2016-07-05 10:22:03 +08:00
    MinonHeart
        1
    MinonHeart  
       2016-07-02 13:19:45 +08:00 via iPhone
    命名空间感觉没必要。倒不如增加数据过期时间和数据版本的管理
    murmur
        2
    murmur  
       2016-07-03 09:12:19 +08:00
    你们真拿 localStorage 和 sessionStroage 当持久化来用了么?
    milklee
        3
    milklee  
    OP
       2016-07-03 12:56:43 +08:00 via iPhone
    @MinonHeart 是啊,不过这方面已经有很多其他的库了
    milklee
        4
    milklee  
    OP
       2016-07-03 12:57:25 +08:00 via iPhone
    @murmur 不行吗😂
    hantsy
        5
    hantsy  
       2016-07-05 10:08:26 +08:00
    Key/value 方式完全没必要。。。用 Angular 扩展很多,不用关心 Ser/Des 操作。同步到 LocalStorage 可以异步,不会 Block UI 。
    milklee
        6
    milklee  
    OP
       2016-07-05 10:22:03 +08:00 via iPhone
    @hantsy 是的,我也觉得我设计的不太好,当时想着的是既有缓存又能操作 storage
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   996 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:43 · PVG 06:43 · LAX 14:43 · JFK 17:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.