vue写入和读取浏览器缓存
客户端缓存:localStorage/sessionStorage
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
sessionStorage-本地存储一个会话(session)中的数据,当页面关闭,数据将清除.存储大小约为5M.
localStorage(sessionStorage)基本用法
1.设置
localStorage.setItem('a','123')
2.1获取
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.删除
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是会话级别的存储,关闭页面,数据将被清除.
版权声明:
作者:广州前端开发
链接:https://www.develophm.com/index.php/vue%e5%86%99%e5%85%a5%e5%92%8c%e8%af%bb%e5%8f%96%e6%b5%8f%e8%a7%88%e5%99%a8%e7%bc%93%e5%ad%98/527/
来源:开发之家
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论