cookie和sessionStorage和localStorage的存取--Vue-router带参数跳转页面_vue-router如何获取session

1. cookie

1. 存储: document.cookie = "Name = Value";             实例:  document.cookie = "张三 = sleep";
2. 拿取: 不能直接拿到某个具体的数据, document.cookie  可以拿到形式为  (Name1=Value1;Name2=Value2;Name3=Vaule3;...)的一个字符串, 下面我们要想方法截取出我们需要的Name和对应的Value

①借用正则和match函数

------首先简单了解一下match()函数------

match定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

语法

stringObject.match(searchvalue)                  searchvalue必需。规定要检索的字符串值。

stringObject.match(regexp)                          regexp必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。 注:RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

 

------实现功能------

getCookie( c_name = "目标Name" ) {

      // 拿到全部的字符串类型的cookie

      const c_name = document.cookie

      // 写匹配规则（以王二开头，以；结尾）

      const reg = /王二.*?;/g

      // 用匹配规则找出目标Name=Value;

      const target = c_name.match(reg)[0]

      // 截取出目标Value值

      const over = target.split("=")[1]

      // 上面截出的Value带着分号，截除分号

      const c_value = over.substring(0,over.length - 1)

      // 打印确认，return 暴露出去

      console.log("哇嘎嘎！","c_value=",c_value)

      return c_value

}

② 看到网上有博主封装了个方法, 每次只要传入一个目标Name就行, 借鉴于(https://blog.csdn.net/minolk/article/details/80540750)

getCookie( c_name = "目标Name" ) {

//判断document.cookie对象里面是否存有cookie

    if (document.cookie.length>0) {

        let c_start=document.cookie.indexOf(c_name + "=")

       //如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串

        if ( c_start!=-1 ){

            c_start=c_start + c_name.length+1

            let c_end=document.cookie.indexOf(";",c_start)

            if (c_end==-1) c_end=document.cookie.length

               console.log(1111,document.cookie.substring(c_start,c_end))

               return unescape(document.cookie.substring(c_start,c_end))

            }

        }

    return ""

}

2. sessionStorage

1. 存储: sessionStorage.setItem("Name",Value);        实例:  sessionStorage.setItem('李四',food);
2. 拿取: sessionStorage.getItem("Name");                  实例:  sessionStorage.getItem("李四"); 
3. 移除: sessionStorage.removeItem("Name");           实例:  sessionStorage.removeItem('李四');
4. 清空全部:sessionStorage.clear();                              实例:  sessionStorage.clear(); 

3. localStorage

1. 存储: localStorage.setItem("Name",Value);              实例:  localStorage.setItem('王二',run);
2. 拿取: localStorage.getItem("Name");                         实例:  localStorage.getItem('王二');
3. 移除: localStorage.removeItem("Name");                 实例:  localStorage.removeItem('王二');
4. 清空全部:localStorage.clear();                                    实例:  localStorage.clear(); 

4. this.$router.push

      传递参数有2种方式：

    方法一：

         传递参数  -- this.$router.push({path: ' 路由 ', query: {key: value}})

         参数取值  -- this.$route.query.key

         使用这种方式，传递参数会拼接在路由后面，出现在地址栏.

    方法二：

         传递参数  -- this.$router.push({name: ' 路由的name ', params: {key: value}})

         参数取值  -- this.$route.params.key

         使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数..

        动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。