最近使用vue开发的项目,开发过程引入了js-cookie插件,在PC端以及移动端网页调试都没出现问题,但是打包成APP在安卓手机调试发现使用js-cookie保存的数据失效了,然后只能使用localStorage解决就OK了。

以下顺便记录下js-cookie的使用方法:

一、安装

npm install js-cookie --save

二、引用

import Cookies from 'js-cookie'

三、一般使用

1.存到Cookie去

// 创建一个在整个网站上有效的Cookie:
Cookies.set('name', 'value'); // 创建一个从现在起7天后过期的cookie,在整个站点上有效:
Cookies.set('name', 'value', { expires: 7 }); // 创建一个过期的cookie,对当前页面的路径有效:
Cookies.set('name', 'value', { expires: 7, path: '' });

2.在Cookie中取出

// 读取 cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined // 阅读所有可见的cookie:
Cookies.get(); // => { name: 'value' }

3.删除Cookies

// 删除 cookie:
Cookies.remove('name'); // 删除对当前页面的路径有效的cookie:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' });

四、特殊使用(在Cookie中存对象)

跟一般使用不同的是,从Cookie中取出的时候,要从字符串转换成json格式:

//建立
Cookies.set('name', { foo: 'bar' }); //获取
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }
Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }

参考:

js-cookie 官方文档

关于js-cookie使用出现兼容性问题以及js-cookie的如何使用的更多相关文章

  1. js中对cookie的操作及json数据与cookie结合的用法

    cookie的使用 添加cookie 添加cookie:document.cookie = “key=value”; // 一次写入一个键值对 document.cookie = 'test1=hel ...

  2. 【转】js中通过docment.cookie获取到的内容不完整! 在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取。 是否有其他办法可以获取到??

    js中通过docment.cookie获取到的内容不完整!在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取.是否有其他办 ...

  3. cookie记住密码/base64加密(js控制)

    cookie记住密码/base64加密(js控制) • 配置cookie //设置cookie function setCookie ( name, value, expdays ) { var ex ...

  4. js中setAttribute 的兼容性

    js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...

  5. cookie的初识和运用(js和jq)

    cookie是什么 cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身 ...

  6. Java网站开发的一些问题以及解决(cookie消失,上传头像,js等)

    1.首先是cookie的问题,很多人都是遇到了将数据存储到cookie中并且add到response之中,但是还有返回其他页面或者刷新页面cookie消失的情况,除了设置cookie的存活时间外, 还 ...

  7. js对secure的支持是没问题的,httponly是为限制js而产生的,当然httponly的cookie也不会被js创建

    function setCookie4(c_name,value,expiredays){ var cookieStr = ""; var exdate=new Date(); e ...

  8. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  9. cookie 详解 与 封装 实用的cookie

    在WEB前端开发中,cookie是必不可少的,网上也有很多开源的库可以使用,不过我还是想自己总结一下,做个笔记并封装一个实用的库.(1)什么是cookie? 从web 角度 cookie是用于存储信息 ...

  10. [Node.js] 00 - Where do we put Node.js

    Ref: 前后端分离的思考与实践(五篇软文) 其实就是在吹淘宝自己的Midway-ModelProxy架构. 第一篇 起因 为了提升开发效率,前后端分离的需求越来越被重视, 同一份数据接口,我们可以定 ...

随机推荐

  1. 当java web项目部署到服务器上时,无法将图片等媒体文件保存到服务器的最终奥义

    今天,我在部署web项目至云服务器上(Tomcat8.0)时,突然发现我的应用,无法上传图片,视频等多媒体文件了,一再检查自己的代码逻辑没有问题之后,逐一排查,首先想到的就是看一下控制台打印的日志,日 ...

  2. 第十九节:Scrapy爬虫框架之Middleware文件详解

    # -*- coding: utf-8 -*- # 在这里定义蜘蛛中间件的模型# Define here the models for your spider middleware## See doc ...

  3. Overload重載和Override重写的区别。Overloaded的方法是否可以改变返回值的类型?

    Overload是重载的意思,Override是覆盖的意思,也就是重写. 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的参数列表各不相同(即参数个数或类型不同). 重写Ove ...

  4. 将cocos2dx 2.x.x从eclipse转移到Android Studio遇到的问题

    cocos2dx 2.x.x从eclipse转移到Android Studio遇到的问题 可能我用不太习惯Android Studio才会遇到这么多问题,让老手们见笑了. cocos2dx的最新版本, ...

  5. 九度oj 题目1473:二进制数(stack)

    题目1473:二进制数 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:9371 解决:2631 题目描述: 大家都知道,数据在计算机里中存储是以二进制的形式存储的. 有一天,小明学了C语 ...

  6. 【NOIP2017练习】函数变换(DP,dfs)

    题意: 思路: 极限步数大概不会超过30 ; ..max,..]of longint; eul:..max]of longint; cas,v,n,k,i,ans,j:longint; functio ...

  7. codevs 1378 选课

    题目描述 Description 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修 ...

  8. CSS3(各UI元素状态伪类选择器受浏览器的支持情况)

    选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...

  9. Windows 10+Ubuntu 16.04在MBR分区上安装双系统之后启动菜单的System Setup选项提示:can't find command "fwsetup"

    背景: 硬盘分区方式:MBR 硬盘容量256,Windows 100,Ubuntu 156,其中主分区安装的是Windows,Ubuntu安装在逻辑分区上,文件系统为Ext4,整个Ubuntu就挂载在 ...

  10. Redis的集群方案之Sentinel(哨兵模式)(待实践)

    哨兵模式是主从切换的一种方案,但是可以借助此方案实现集群,达到高可用. 先收集教程,待实践. 参考: https://redis.io/topics/sentinel(官方文档) http://ife ...