浅谈localstorage的运用

1.localStorage API

（1）setItem

setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value

如果我们想在浏览器缓存中存入一些数据，可以这样去写：

此时我们查看浏览器缓存，信息已经存入：

（2） getItem

getItem(“key”)：获取名称为key的值，如果key不存在则返回null

所以我们可以通过索引key值获取本地缓存的信息：

（3）removeItem

removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除

如果我们想删除本地缓存 key值所对应的信息，可以这样去写：

此时浏览器缓存中key值storage对应的信息已经删除，通过getItem已经获取不到了。

（4）clear

clear()：清空localStorage中所有信息

removeItem只能删除一个key值对应的value，而clear可以删除所有key对应的value

我们可以尝试创建多个key，如下：

此时缓存中，就存入两个key对应的value：

所以现在我们可以通过clear清除所有的key对应的信息，如下：

由此可见，使用clear()可以清除浏览器所有缓存。

（5）JSON的使用

JSON.parse(): 可以将字符串转化成对象形式

通常来说，我们通过localStorage.getItem()获取的key值为字符串，可以将它转化成对象

JSON.stringify():可以将对象转化成字符串

我们也可以将对象转化成字符串使用，如下：

2.storage二次封装（简约版）

上述所示，我们了解locaStorage常用的API和JSON的使用方式，接下来我们可以对storage做一层简单的封装：

（1）storage.js 编写如下：

/**
 * 存储数据
 */
export const setItem = (key, value) => {
  // 将数组、对象类型的数据转化为JSON字符串进行存储
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

/**
 * 获取数据
 */
export const getItem = key => {
  const data = window.localStorage.getItem(key)
  try {
    // data数据为字符串，转化为对象形式
    return JSON.parse(data)
  } catch (error) {
    return data
  }
}

/**
 * 删除数据
 */
export const removeItem = key => {
  window.localStorage.removeItem(key)
}

/**
 * 删除所有数据
 */
export const removeAllItem = key => {
  window.localStorage.clear(key)
}

（2）.vue进行测试

简单封装后，我们可以在vue文件进行测试，如下：

如此，storage就简单的封装好了。

3.storage二次封装（完整版）

关于storage的二次封装，这里是我学习中总结的第二种思路，我们可以先定义一个namespace，可以将项目中的所有key存入进去，具体思路如下：

（1）storage.js 编写如下：

/**
 * Storage二次封装
 * @author Gavin
 */
const namespace = 'liming';

export default {
  // 存储数据
  setItem(key, val) {
    let storage = this.getStroage();
    storage[key] = val;
    window.localStorage.setItem(namespace, JSON.stringify(storage));
  },
  // 获取数据
  getItem(key) {
    return this.getStroage()[key];
  },
  // 删除数据
  clearItem(key) {
    let storage = this.getStroage();
    delete storage[key];
    window.localStorage.setItem(config.namespace, JSON.stringify(storage));
  },
  // 删除所有数据
  clearAll() {
    window.localStorage.clear();
  },
   getStroage() {
    return JSON.parse(window.localStorage.getItem(namespace) || '{}');
  }
};

如此，localStorage的学习已经完成。