vue的localStorage本地缓存和sessionStorage临时缓存

勇敢*牛牛

已于 2022-04-27 20:52:14 修改

阅读量8.9k

点赞数 6

分类专栏： Vue2.js 文章标签： vue

于 2022-04-24 09:47:16 首次发布

本文链接：https://blog.csdn.net/m0_46672781/article/details/124375104

版权

Vue2.js 专栏收录该内容

93 篇文章

订阅专栏

localStorage和sessionStorage

vue的localStorage本地缓存
sessionStorage临时缓存
总结
- webStorage和sessionStorage

vue的localStorage本地缓存

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage</title>
</head>

<body>
    <h1>localStorage</h1>
    <button onclick="fun()">点击我存储一个数据</button><br>
    <button onclick="disPlay()">点击我查看一个存储信息</button>
    <button onclick="selete()">点击我删除一个存储的信息</button>
    <script>
        let a = { name: "勇敢", mes: 123 }
        function fun() {
            window.localStorage.setItem('message', '勇敢牛牛');
            //对象解析Wie字符串
            window.localStorage.setItem('message_2', JSON.stringify(a))
        }
        function disPlay() {
            console.log(window.localStorage.getItem('message'));
            var result = window.localStorage.getItem('message_2');
			//将一个字符串解析为对象
            console.log(JSON.parse(result));
        }
        function selete() {
            window.localStorage.removeItem('message');
        }
    </script>
</body>

</html>

sessionStorage临时缓存

缓存的数据跟随浏览器的页面关闭而清空。

总结

webStorage和sessionStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。
  
  session：存储，关闭浏览器删除

保存数据：window.sessionStorage.setItem('key',value);
读取数据：window.sessionStorage.getItem('key');
删除单个数据：window.sessionStorage.removeItem('key');
删除所有数据：window.sessionStorage.clear();
得到某个索引的key：window.sessionStorage.key(index);

存一个对象到缓存中

存：sessionStorage.setItem('userinfo',JSON.stringify(datas.obj));

取：

if(window.sessionStorage.getItem("userinfo")){
      let userinfo = JSON.parse(window.sessionStorage.getItem("userinfo"));
      this.username = JSON.parse(window.sessionStorage.getItem("userinfo")).username;
    }

vue本地缓存localStorage将多次添加的表单数据存为数组格式

var templist = JSON.parse(window.sessionStorage.getItem("msgBody") || "[]");
      templist.push(this.msgBody);
      localStorage.setItem("msgBody", JSON.stringify(templist));

大概思路就是先取再存，先把上次存入的一组数据取出来，将本次新增的的表单数据放入，再存。this.msgBody是我放当前表单各项数值的地方。"msgBody"是key的名字这个随意取

取得时候

 var items = JSON.parse(localStorage.getItem("msgBody"));

利用key值就拿到数组啦

local:永久存储，手动删除

保存数据：

window.localStorage.setItem('key',value);

读取数据：

window.localStorage.getItem('key');

删除单个数据：

window.localStorage.removeItem('key');

删除所有数据：

window.localStorage.clear();

得到某个索引的key

window.localStorage.key(index);

localStorage
localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

localStorage主要有以下几种方法:
setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value

1、保存数据到本地
第一个参数是保存的变量名，第二个是赋给变量的值

localStorage.setItem('Author', 'local');

2、从本地存储获取数据

localStorage.getItem('Author');

3、从本地存储删除某个已保存的数据

localStorage.removeItem('Author');

4、清除所有保存的数据

localStorage.clear();

localStorage.setItem("name","john"); //设置name为john
localStorage.setItem("name","john1"); //覆盖之前的值，现在name所对应的值是john1
// 使用localStorage 注意 避免默写浏览器抛出异常
// let defaultCity = '北京'
// try {
//   if(localStorage.city){
//     defaultCity = localStorage.city
//   }
// }catch (e){}
// 使用
// city:defaultCity
JSON.stringify(); // 将json格式的数据转换成JSON格式的字符串

 var  data = {name:"john"};
      data = JSON.stringify(data);
      localStorage.setItem("data1",data);
JSON.parse(); 将json格式的字符串转换成JSON对象进行处理

var str = localStorage.getItem("data1");
var obj = JSON.parse(str);
        console.log(obj);
sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

    // 1、保存数据到本地
    // 第一个参数是保存的变量名，第二个是赋给变量的值
    sessionStorage.setItem('Author', 'session');
    // 2、从本地存储获取数据
    sessionStorage.getItem('Author');
    // 3、从本地存储删除某个已保存的数据
    sessionStorage.removeItem('Author');
    // 4、清除所有保存的数据
    sessionStorage.clear();

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象

var user = {
      username: 'liu',
      password: '123456'
    };
    user = JSON.stringify(user);
    sessionStorage.setItem('user', user);
    var account = sessionStorage.getItem('user');
    console.log(account);
    account = JSON.parse(account)
    console.log(account);