cookie和sessionStorage和localStorage的存取--Vue-router带参数跳转页面

1. cookie

存储: document.cookie = "Name = Value"; 实例: document.cookie = "张三 = sleep";
拿取: 不能直接拿到某个具体的数据, 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

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

3. localStorage

存储: localStorage.setItem("Name",Value); 实例: localStorage.setItem('王二',run);
拿取: localStorage.getItem("Name"); 实例: localStorage.getItem('王二');
移除: localStorage.removeItem("Name"); 实例: localStorage.removeItem('王二');
清空全部: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来指定页面。

cookie和sessionStorage和localStorage的存取--Vue-router带参数跳转页面相关推荐

一文读懂cookie、sessionStorage和localStorage的区别
cookie.sessionStorage和localStorage的区别 cookie 什么是cookie? cookie的构成 cookie的特点 Cookie并不提供修改.删除操作封装setC ...
浏览器本地存储（cookie、sessionStorage和localStorage）
1.Cookie 特点:存储大小4KB左右:可设置失效时间:通信时会携带在HTTP头中,使用cookie保存过多数据会影响性能. 注意:cookie的跨域可以理解为跨域名,只要二级域名相同,不涉及到端 ...
web存储三种方式：cookie、sessionStorage、localStorage
cookie.sessionStorage.localStorage 1. Cookies 存储到浏览器中面向服务器同一个服务器可以共享Cookies 产生于服务器端实例方法: set() ge ...
浏览器缓存--cookie、sessionStorage、localStorage、indexedDB
浏览器缓存–cookie.sessionStorage.localStorage.indexedDB cookie 最初用于在客户端存储会话信息服务器在响应 HTTP 请求时,向客户端发送 Set- ...
web存储详解（cookie、sessionStorage、localStorage、indexedDB）
目录一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...
button默认属性值、cookie、sessionStorage、localStorage（后台管理系统遇到的问题）
原生js点击button会刷新页面原因: 使用了原生的button按钮,而使用原生按钮需要注意的是:原生按钮button默认 type='submit' 这个属性值是默认具有表单提交功能的,所以在 ...
Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...
Vue computed带参数
Vue computed带参数一般情况下,我们在Vue中使用computed计算属性是无法直接进行传参的. 方法:如果有传参数的需求可以通过闭包函数(也叫匿名函数)来实现. 例如需要通过数据的大小, ...
浏览器储存之Cookie、sessionStorage、localStorage和indexedDB区别与详解
一般在项目中我们逗需要把信息存储在本地的情况,比如权限验证的token.用户信息.埋点计数.客户配置的皮肤信息或语言种类等,我们可以暂存一下避免浏览器不必要的请求和客户多余操作,较少请求从而提高性能以 ...

cookie和sessionStorage和localStorage的存取--Vue-router带参数跳转页面

1. cookie

2. sessionStorage

3. localStorage

4. this.$router.push

cookie和sessionStorage和localStorage的存取--Vue-router带参数跳转页面相关推荐

最新文章

热门文章