精华内容
下载资源
问答
  • Js-cookie
    万次阅读 多人点赞
    2021-11-03 15:48:52

    js-cookie是什么?
    js-cookie是一个简单的,轻量级的处理cookies的js API,用来处理cookie相关的插件

    js-cookie的使用方法
    一、先下载

    npm install --save js-cookie
    

    **二、引入
    安装好js-cookie插件后,在我们需要处理cookie的地方,简单的通过import引入就可以使用了

    import Cookies from 'js-cookie'
    

    三、js-cookie的添加 获取 删除

    添加cookie

    // 创建一个名称为name,对应值为value的cookie,由于没有设置失效时间,默认失效时间为该网站关闭时
    Cookies.set(name, value)
    
    // 创建一个有效时间为7天的cookie
    Cookies.set(name, value, { expires: 7 })
    
    // 创建一个带有路径的cookie
    Cookies.set(name, value, { path: '' })
    
    // 创建一个value为对象的cookie
    const obj = { name: 'ryan' }
    Cookies.set('user', obj)
    

    获取cookie

    // 获取指定名称的cookie
    Cookies.get(name) // value
    
    // 获取value为对象的cookie
    const obj = { name: 'ryan' }
    Cookies.set('user', obj)
    JSON.parse(Cookies.get('user'))
    
    // 获取所有cookie
    Cookies.get()
    

    删除cookie

    // 删除指定名称的cookie
    Cookies.remove(name) // value
    
    // 删除带有路径的cookie
    Cookies.set(name, value, { path: '' })
    Cookies.remove(name, { path: '' })
    
    更多相关内容
  • 1、安装js-cookie # npm install js-cookie –save # yarn add js-cookie 2、引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return ...
  • js-cookie.js

    2020-03-31 11:39:22
    js_cookie源码下载,js-cookie用于操作cookie,笔者是因为一开始不会弄,后来会整下来了,鉴于自身经历,故将其分享出来。
  • 安装NPM JavaScript Cookiejs-cookie的名称支持 。 $ npm i js-cookienpm软件包的module字段指向该库的ES模块变体,主要是为支持ES模块的捆绑程序提供支持,而其browser字段则指向UMD模块以实现完全向后兼容。...
  • js-cookie:js-cookie

    2021-06-19 21:17:59
    js-cookie** 提供了 JavaScript 操作 cookie 的函数 **
  • my-js-cookie

    2021-03-25 22:51:01
    造一个js-cookie车轮 项目源码: : 预览链接:http: 参考轮子: : Cookie相信大家都不陌生,但是很多时候我们都是这样:手写一个js-cookie的库,今天就带大家一起来写一个js-cookie的小库。 从零开始 首先,我们...
  • 一个用于浏览器的小型 cookie 操作插件。 从1.x升级到2.x :您可以检查 如果您使用过 tiny-cookie,那么您可能会对感兴趣,这是一个专注于 Web 开发的函数集合。 安装 新产品管理: npm install tiny-cookie 用法...
  • useCookie-React钩基于React Hook for Cookies安装方式npm install @use-hook/use-cookie --save用法import { useCookie } from "@use-hook/use-cookie" ;function App ( ) { const [ name , setName ] = useCookie ...
  • Vue中使用js-cookie

    千次阅读 2022-05-08 22:22:41
    Vue中 引入使用 js-cookie

    js-cookie 是关于 cookie 存储的一个js的API,根据官网描述其优点有:适用所有浏览器、接受任何字符、经过任何测试没什么 bug、支持 CMD 和 CommonJS、

    压缩之后非常小,仅900个字节。

    参考文档: https://www.npmjs.com/package/js-cookie

    1.安装

    npm install js-cookie --save
    

    也可以直接使用 js-cookie.js

    https://lib.baomitu.com/js-cookie/3.0.1/js.cookie.js
    

    2.引入

    1.全局引入

    // main.js
    import jsCookie from 'js-cookie'
    Vue.prototype.$cookie = jsCookie;  // 在页面里可直接用 this.$cookie 调用
    

    2.按需引入

    import Cookies from 'js-cookie'
    Cookies.set('foo', 'bar')
    

    3.使用

    1.写入Cookie

    Cookies.set('name', 'value')
    Cookies.set('name', 'value', { expires: 7 })
    Cookies.set('name', 'value', { expires: 7, path: '' })
    

    2.读取Cookie

    Cookies.get('name') // => 'value'
    Cookies.get('nothing') // => undefined
    Cookies.get() // => { name: 'value' }
    Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!
    

    3.删除Cookie

    Cookies.remove('name')
    Cookies.set('name', 'value', { path: '' })
    Cookies.remove('name') // fail!
    Cookies.remove('name', { path: '' }) // removed!
    Cookies.remove('name', { path: '', domain: '.yourdomain.com' })
    

    4.Cookie的属性

    1.过期时间 expires

    定义什么时候删除cookie中的数据,值必须为number .

    默认: 当用户关闭浏览器时,删除Cookie

    Cookies.set('name', 'value', { expires: 365 })
    Cookies.get('name') // => 'value'
    Cookies.remove('name')
    

    2.path-路径

    默认: /

    Cookies.set('name', 'value', { path: '' })
    Cookies.get('name') // => 'value'
    Cookies.remove('name', { path: '' })
    

    3.domain

    一个字符串,指示一个有效的域,其中cookie应该是可见的。cookie对所有子域也是可见的。

    默认: Cookie只对创建Cookie的页面的域或子域可见,Internet Explorer除外(见下文)。

    假设一个正在site.com上创建的cookie:

    Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
    Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')
    

    4.secure

    true或false,表示cookie传输是否需要安全协议(https)。

    默认: 没有安全协议

    Cookies.set('name', 'value', { secure: true })
    Cookies.get('name') // => 'value'
    Cookies.remove('name')
    

    5.sameSite

    一个字符串,允许控制浏览器是否在跨站点请求时发送cookie。

    Cookies.set('name', 'value', { sameSite: 'strict' })
    Cookies.get('name') // => 'value'
    Cookies.remove('name')
    
    展开全文
  • js-cookie

    2021-06-10 15:46:17
    js-cookie基础使用与一些坑简介使用 简介 js-cookie是一个简单的,轻量级的处理cookies的js API。简化了原生cookie处理操作。 安装:npm install --save js-cookie 使用 1、设置cookie //设置了path与domain属性 ...

    js-cookie基础使用与一些坑

    简介

    js-cookie是一个简单的,轻量级的处理cookies的js API。简化了原生cookie处理操作。
    安装:npm install --save js-cookie

    使用

    1、设置cookie
    在这里插入图片描述

    	 //设置了path与domain属性
    	 import Cookie from "js-cookie";
    	 let serve = window.location.hostname;
                  Cookie.set(keys.userInfo, JSON.stringify(data), {
                    path: "/",
                    domain: serve,
                  });
         //只设置name
         Cookie.set(keys.userInfo, token);
    

    2、获取cookie
    支持获取字符串与JSON对象支持获取字符串与JSON对象

    let userdata = Cookie.getJSON(keys.userInfo);
    

    3、删除cookie
    在这里插入图片描述
    删除cookie这里踩了一个坑,在设置domain是域名的情况下,直接使用Cookie.remove(keys.userInfo)发现怎么都删除不了。
    最终加上path与domain,成功删除
    cookie删除不了一般都是没指定path,或者domain属性

    Cookie.remove(keys.userInfo, {
      path: "/",
      domain: serve,
    });
    
    展开全文
  • 1、引入js-cookie.js 1.直接饮用cdn:<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> 2.本地下载下来后:<script src="/path/to/js.cookie.js"></...

    安装

    //以下几种都可以用:
    1、引入js-cookie.js
    
    1.直接饮用cdn:<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    
    2.本地下载下来后:<script src="/path/to/js.cookie.js"></script>
    
    3.模块化开发时: import Cookies from 'js-cookie'

    下载cookie

    npm install js-cookie

    当前页面引用cookie

    import Cookies from "js-cookie";

    cookie在当前的使用(方法一)

    // 组件中使用
    // 写入cookie
    Cookies.set('name', 'value')
    // 读取
    Cookies.get('name') // => 'value'
    Cookies.get('nothing') // => undefined
    // 读取所有可见的cookie
    Cookies.get()
    // 删除某项cookie值
    Cookies.remove('name')

    cookie在全局使用(方法二)

    main.js
    
    import Cookies from 'js-cookie'

    cookie设置过期时间

    //1、存cookie  set方法支持的属性有 :  expires->过期时间    path->设置为指定页面创建cookie   domain-》设置对指定域名及指定域名的子域名可见  secure->值有false和true ,表示设置是否只支持https,默认是false
    Cookies.set('key', 'value');  //创建简单的cookie
    Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
    Cookies.set('key', 'value', { expires: 17, path: ''  }); //可以通过配置path,为当前页创建有效期7天的cookie
    
    //2、取cookie
    Cookies.get('key'); // 获取指定key 对应的value
    Cookies.get(); //获取所有value
    
    //3、删除cookie
    Cookies.remove('key');//删除普通的cookie
    Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie
    注意:如果存的是对象,如: userInfo = {age:111,score:90};  Cookie.set('userInfo',userInfo)
    取出来的userInfo需要进行JSON的解析,解析为对象:let res = JSON.parse( Cookie.get('userInfo') );
    当然你也可以使用:Cookie.getJSON('userInfo');
    Cookies.get('name'); // => '{"foo":"bar"}'
    Cookies.get(); // => { name: '{"foo":"bar"}' }
    //-------------------------------------------------------//
    Cookies.getJSON('name'); // => { foo: 'bar' }
    Cookies.getJSON(); // => { name: { foo: 'bar' } }

    举例二

    业务需要在前端进行数据的缓存,到期就删除再进行获取新数据。

    前端设置数据定时失效的可以有下面2种方法:
    1、当数据较大时,可以利用localstorage,存数据时候写入一个时间,获取的时候再与当前时间进行比较
    2、如果数据不超过cookie的限制大小,可以利用cookie比较方便,直接设置有效期即可。

    利用localstorage实现:

    1.存储数据时加上时间戳
    在项目开发中,我们可以写一个公用的方法来进行存储的时候加上时间戳

    //export抛出
    export function setLocalStorageAndTime (key, value) {
     window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
    }

    项目中:

    存储、
    // 有数据再进行存储
      setLocalStorageAndTime('XXX', {name: 'XXX'})
      
    读取、
    // 判断是否返回为null或者失效
    getLocalStorageAndTime('XXX', 86400000)

    获取数据时与当前时间进行比较

    export function getLocalStorageAndTime (key, exp = 86400000) {
     // 获取数据
     let data = window.localStorage.getItem(key)
     if (!data) return null
     let dataObj = JSON.parse(data)
     // 与过期时间比较
     if (new Date().getTime() - dataObj.time > exp) {
      // 过期删除返回null
      removeLocalStorage(key)
      console.log('信息已过期')
      return null
     } else {
      return dataObj.data
     }
    }

    利用cookie实现 

    js-cookie 的示例中只有以天为单位的有效期:

    Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效

    官方文档只要设置天数,没有时分秒,这样我们想设置更小单位的时候无法下手,其实也可以设置时间戳来处理时间的,下面这种方式可以设置任意单位的有效期:

    let seconds = 10;
    let expires = new Date(new Date() * 1 + seconds * 1000);
    Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效

    利用js-cookie的封装, 记得 npm i js-cookie

    import Cookies from 'js-cookie'
     
    /*
    * 设置cookies
    * */
    export function getCookies (key) {
     return Cookies.get(key)
    }
    /*
    * 设置Cookies
    * */
    export function setCookies (key, value, expiresTime) {
     let seconds = expiresTime
     let expires = new Date(new Date() * 1 + seconds * 1000)
     return Cookies.set(key, value, { expires: expires })
    }
    /*
    * 移除Cookies
    * */
    export function removeCookies (key) {
     return Cookies.remove(key)
    }

    域domain与路径path

    默认值:
    path: ‘/’
    前言:

    domain表示的是cookie所在的域,默认为请求的地址,如网址为www.jb51.net/test/test.aspx,那么domain默认为www.jb51.net。而跨域访问,如域A为t1.test.com,域B为t2.test.com,那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com;如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.test.com。

    path表示cookie所在的目录,asp.net默认为/,就是根目录。在同一个服务器上有目录如下:/test/,/test/cd/,/test/dd/,现设一个cookie1的path为/test/,cookie2的path为/test/cd/,那么test下的所有页面都可以访问到cookie1,而/test/和/test/dd/的子页面不能访问cookie2。这是因为cookie能让其path路径下的页面访问。

    cookie.set()更多参数

    语法:
    cookies.set(名称,[值],[options])
    更多options的参数配置:

    maxAge:一个数字,表示自Date.now()到期起的毫秒数

    expires:一个Date对象,指示cookie的过期日期(默认在会话结束时过期)。默认:天

    path:一个字符串,指示cookie的路径(/默认情况下)。

    domain:一个字符串,指示cookie的域(无默认值)。

    secure:一个布尔值,指示cookie是否仅通过HTTPS发送(false默认情况下,对于HTTP,true默认情况下,对于HTTPS)。在下面阅读有关此选项的更多信息。
    httpOnly:一个布尔值,指示cookie是否仅通过HTTP(S)发送,并且不提供给客户端JavaScript(true默认情况下)。

    sameSite:布尔值或字符串,指示cookie是“相同站点” cookie(false默认情况下)。可以将其设置为’strict’,‘lax’或true(映射到’strict’)。

    signed:一个布尔值,指示是否要对cookie进行签名(false默认情况下)。如果为真,.sig则还将发送另一个具有后缀的同名Cookie,其27字节的url安全base64 SHA1值表示针对第一个Keygrip密钥的cookie-name = cookie-value的哈希值。此签名密钥用于检测下次接收cookie时的篡改。

    overwrite:一个布尔值,指示是否覆盖以前设置的同名Cookie(false默认情况下)。如果是这样,则在设置此Cookie时,将从相同名称的同一个请求中设置的所有Cookie(无论路径或域如何)都从Set-Cookie标头中过滤掉。

     

    展开全文
  • 浅谈源码之js-cookie

    2021-12-26 10:29:51
    浅谈源码之js-cookie前言阅读前准备1.下载js-cookie到本地2.查看官方md文档常用方法cookie常用的参数3.js-cookie源码解析整体查看方法init函数set函数get函数4.总结 前言 作为一位前端er对cookie一定非常的熟悉,...
  • 主要介绍了利用js-cookie实现前端设置缓存数据定时失效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • js-cookiecookie过期时间为30分钟
  • 接受单个set-cookie标头值、一组set-cookie标头值或可能具有 0 个或多个set-cookie标头的 Node.js 响应对象。 还接受一个可选的选项对象。 默认值: { decodeValues : true , // Calls dcodeURIComponent on ...
  • js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级,js-cookie也支持npm和Bower安装和管理,下面看看js-cookie的具体用法 1、引入js-cookie.js 1.直接饮用cdn:<script src=...
  • js-cookie使用介绍

    2022-05-28 21:34:18
    js-cookie是一个简单的,轻量级的处理cookie的jsAPI。 适用于所有的浏览器; 接收任何字符; 严格的测试; 无依赖; 支持ES模块; 支持AMD/CommonJS; RFC6265标准; 维基; 可用自定义编码/解码; <800字节压缩...
  • nestjs-cookie-session NestJS的惯用Cookie会话模块。 建立在之上 :smiling_face_with_sunglasses: 例 注册模块: // app.module.ts import { Module } from '@nestjs/common' ; import { ...
  • vue 中 js-cookie 的使用

    2022-01-13 17:17:41
    import jsCookie from 'js-cookie' 3、使用 设置cookie jsCookie.set('name','张三') jsCookie.set('name','张三',{ expires: 7}) //expires number 数据存几天 也可传入一个Date对象,表示有效期至Date指定时间...
  • js-cookie使用方法

    2022-04-22 10:18:54
    js-cookie是用来处理cookie的插件 安装插件 npm install --save js-cookie 1. 使用引用 安装好js-cookie插件后,在我们需要处理cookie的地方,简单的通过import引入就可以使用了 import Cookies from 'js-cookie' ...
  • JavaScript-Cookie是一款用于处理 cookie 的简单、轻量级的 JavaScript API ,使用起来很简单。 特点 适用于所有的浏览器 接受任何字符 大量的测试 无依赖性 支持 ES 模块 支持 AMD/CommonJS 符合RFC 6265 启用...
  • vue中使用js-cookie

    2021-12-29 10:00:20
    npm install js-cookie --save 二、引用 import Cookies from 'js-cookie' 三、使用 3.1 创建cookie //创建简单的cookie Cookies.set('name', 'value'); //创建有效期为7天的cookie Cookies.set('name', '...
  • js-cookie的基本使用

    千次阅读 2021-10-15 14:52:33
    js-cookie是一个简单的,轻量级的处理cookies的js API。 创建 //创建简单的cookie Cookies.set('name', 'value'); //创建有效期为7天的cookie Cookies.set('name', 'value', { expires: 7 }); //为当前页创建有效期7...
  • js-cookie及其使用

    千次阅读 2022-04-13 15:12:41
    js-cookie及其使用
  • js-cookie 失效问题

    2022-07-13 19:41:30
    js-cookie失效问题--建议
  • JavaScript Cookie 用于管理浏览器Cookie的微型JavaScript脚本。 安装 直接下载 下载源文件并将其包含在您HTML文件中: 基本用法 Cookie . set ( strName , strVal , fDays = 1 , strPath = '/' , bSec = false ...
  • JS-cookie函数封装方法

    2022-07-05 19:19:47
    JS-cookie函数封装方法
  • 一、概述 js-cookie是一个简单的,轻巧的Javascript Api工具,用于处理Cookie的存取值。 二
  • Vue中 引入使用 js-cookie

    千次阅读 2021-04-28 23:18:31
    1. js-cookie 安装及引入 js-cookie 是关于 cookie 存储的一个js的API,根据官网描述其优点有:适用所有浏览器、接受任何字符、经过任何测试没什么 bug、支持 CMD 和 CommonJS、压缩之后非常小,仅900个字节。 npm ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 253,879
精华内容 101,551
关键字:

Js-cookie