前端vue js 数组对象存cookie 后端获取实现

一、封装设置cookie方法

//name 字段名   value 字段值   perpetual  有效期
setCookie(name,value,perpetual) {
    
    
    let exdate = new Date()
    exdate.setDate(exdate.getDate() + perpetual)  //exdate.setDate(exdate.getDate() + 365)
    document.cookie = name + '=' + value + ';expires=' + exdate.toGMTString()
    //永久有效
    //document.cookie = name + '=' + value + ';expires=' + 'Fri, 31 Dec 9999 23:59:59 GMT'    
},

二、封装获取cookie数据

//name 字段名   
getCookie (name) {
    
    
      if (document.cookie.length > 0) {
    
    
        var start = document.cookie.indexOf(name + '=')
        if (start !== -1) {
    
    
          start = start + name.length + 1
          let end = document.cookie.indexOf(';', start)
          if (end === -1) end = document.cookie.length
          return unescape(document.cookie.substring(start, end))
        }
      }
      return ''
    },

三、cookie存数组对象

在我们使用cookie存数组时,可以通过**JSON.stringify()**转换为JSON字符串进行存入

const arr = [
  {
    
     id: "a", pid: "", name: "总裁办" },
  {
    
     id: "b", pid: "", name: "行政部" },
  {
    
     id: "c", pid: "", name: "财务部" },
  {
    
     id: "d", pid: "c", name: "财务核算部" },
  {
    
     id: "e", pid: "c", name: "税务管理部" },
  {
    
     id: "f", pid: "e", name: "税务管理部-分部" },
];
const ex= 7 * 24 * 60 * 60 * 1000
setCookie('LOST',JSON.stringify(arr),ex)

四、cookie取数组对象

通过cookie存数组后,我们取数组时可以通过 JSON.parse() JSON字符串转换为数组对象进行使用

const lost = JSON.parse(getCookie('LOST'));
console.log('lost',lost)

五、使用encodeURIComponent存入可以通过后端获取解码的cookie

取前端可以正常使用cookie存数组 JSON.parse()JSON.parse() 后,后端在获取cookie获取不到存在cookie的JSON字符串,通过查询资料发现,是因为含有逗号等字符的原因。

在cookie存入数组对象时,通过使用encodeURIComponent() ,ES5内置的方法转编码,后端在获取到cookie后解码就可以正常拿到了。**

const arr = [
  {
    
     id: "a", pid: "", name: "总裁办" },
  {
    
     id: "b", pid: "", name: "行政部" },
  {
    
     id: "c", pid: "", name: "财务部" },
  {
    
     id: "d", pid: "c", name: "财务核算部" },
  {
    
     id: "e", pid: "c", name: "税务管理部" },
  {
    
     id: "f", pid: "e", name: "税务管理部-分部" },
];
const ex= 7 * 24 * 60 * 60 * 1000
setCookie('LOST',encodeURIComponent(JSON.stringify(arr)),ex)

猜你喜欢

转载自blog.csdn.net/weixin_44982333/article/details/127439937