localstorage的使用(缓存)

2018-05-10  本文已影响0人  洋洋袁

在微信公众号看到了一篇文章,截取一些重点做笔记,篇尾附上原文出处。

1. localStorage出现的需求和目的

    localStorage出现是为了弥补cookie(4k)容量过小的问题,localStorage在大部分电脑是5m。与localStorage同时出现的还有sessionStorage,sessionStorage是会话级,页面关闭,自动清除,localStorage需要清除行为才能清除。

2. 操作方法

    新增(替换),获取,单个移除,全部移除:

    1. window.localStorage.setItem(key,value)

    2. window.localStorage.getItem(key)

    3. window.localStorage.removeItem(key)

    4. window.localStorage.clear(key)

    window是可以省略的,且需要注意的是:简单数据类型和复杂数据类型都可以存储在localStorage当中,但是对于引用数据类型,需要进行序列化和反序列化,说人话就是用JSON.stringify()转换为json字符串,同理获取的时候可以恢复为原来的数据

3. 注意的地方

    1. 当存量接近最大值时,getItem的速度大大降低。

    2. setItem时,如果存量加上添加量大于上限,那么就会出错,需要捕捉错误:

        try {  

              localStorage.setItem(key, value);

        } catch(e) {

              if (isQuotaExceeded(e)) {

                    // Storage full, maybe notify user or do some clean-up

              }

        }

function isQuotaExceeded(e) {  

  var quotaExceeded = false;

  if (e) {

    if (e.code) {

      switch (e.code) {

        case 22:

          quotaExceeded = true;

          break;

        case 1014:

          // Firefox

          if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {

            quotaExceeded = true;

          }

          break;

      }

    } else if (e.number === -2147024882) {

      // Internet Explorer 8

      quotaExceeded = true;

    }

  }

  return quotaExceeded;

}

4. 加载和缓存静态资源

    后边实在是太长,直接扔原文

上一篇下一篇

猜你喜欢

热点阅读