localstorage的使用（缓存）

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

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. 加载和缓存静态资源

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