vue-浏览器缓存

一.客户端缓存:localStorage/sessionStorage

localStorage -持久化的本地存储,除非主动删除数据，否则数据永远不会过期.

sessionStorage-本地存储一个会话（session）中的数据,当页面关闭,数据将清除.存储大小约为5M.

---

二.localStorage(sessionStorage)基本用法

1.设置

setItem(key,value)                  
localStorage.setItem('a','123');

2.1获取

getItem(key);                                        
localStorage.getItem('a'); //返回123

2.2遍历获取

var storage=window.localStorage;
            storage.a1=1;
            storage.setItem("a2",2);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }

3.删除

removeItem(key);                                    
localStorage.removeItem('a');  //删除指定缓存
localStorage.clear();  //清空所有本地缓存

注意:

①localStroage返回的所有数据都是字符串.当缓存的数据为json时,需要用以下方法转换:

JSON.stringify()用于从一个对象解析出字符串；
JSON.parse()用于从一个字符串中解析出json对象。
var jsonData = {'name': '小红', 'age': 18}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 18

②sessionStorage用法与localStroage一样,只不过它们的作用域不一样;sessionStorage是会话级别的存储，关闭页面，数据将被清除.

---

三.项目应用

1.将用户登入信息存入sessionStorage

......
  const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        //登入成功后,缓存用户登入信息
        sessionStorage.setItem('username', value)     //将用户名缓存
        var time = new Date().toLocaleDateString() + new Date().toLocaleTimeString()
        sessionStorage.setItem('t', time)             //将登入时间缓存
        callback()
      }
    }
......

2.获取用户登入信息

......
 handleGetUser() {
      var uname = sessionStorage.getItem('username')
      var time = sessionStorage.getItem('t')
      alert('登入用户名为:' + uname + '      ' + '登入时间为:' + time)
    },
......

3.清除缓存

......
 handleClear() {
      localStorage.clear()    //清除所有本地缓存
      sessionStorage.clear()  //清除当前会话所有缓存
      sessionStorage.removeItem('username') //清除指定缓存
      alert('清除成功')
    },
......

---