封装localStorage

什么是localStorage？

localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。
localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。

在安全性方面，localstorage是域内安全的，即localstorage是基于域的。任何在该域内的所有页面，都可以访问localstorage数据。但让然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在firefox中使用localstorage存储一组数据，在chrome浏览器下是无法读取的。同样，由于localstorage数据是保存在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同的。

创建utils包，将localStorage.js放入utils包下
localStorage.js

const localStorage = window.localStorage

/**
 * localStorage 设置
 * @param {String} key 键
 * @param {String} val 值
 */
export function set(key, val) {
  try {
    if (!key) return
    return localStorage.setItem(key, val)
  } catch (err) {}
}

/**
 * localStorage 获取
 * @param {String} key 键
 * @return {Boolean} key 对应 localStorage 的值
 */
export function get(key) {
  try {
    if (!key) return ''
    return localStorage.getItem(key)
  } catch (err) {
    return ''
  }
}

/**
 * 清除 localStorage，若不填参数 key ，则清除所有 localStorage
 * @param {String} key 键
 * @return {Boolean} 是否清除成功
 */
export function remove(key) {
  try {
    if (typeof key === 'undefined') return localStorage.clear()
    return localStorage.removeItem(key)
  } catch (err) {
    return false
  }
}

/**
 * 检查是否支持 localStorage
 * @return {Boolean} 当前浏览器是否支持 localStorage
 */
export function support() {
  try {
    localStorage.setItem('key', 'value')
    if (localStorage.getItem('key') === 'value') {
      localStorage.removeItem('key')
      return true
    } else {
      return false
    }
  } catch (err) {
    return false
  }
}

// 默认导出全量方法
export default {
  get,
  set,
  remove,
  support
}

需要使用localStorage的页面引入localStorage.js

import localStorage from '../utils/localStorage.js'

localStorage.set('key','val')
localStorage.get('key')
localStorage.remove('key')