当前位置: 首页 > Web前端 > JavaScript

每天一个npm包js-cookie

时间:2023-03-27 00:21:27 JavaScript

大家好,我是前端学长Joshua(公众号)。热衷于做开源和写文章。旨在帮助大学生和刚步入职场的小伙伴们尽快搭建属于自己的前端学习体系。如果你有学习困惑,欢迎关注我,找我交流,我会实时回复你。每日一个npm包的js-cookie特性介绍:js-cookie是一个简单易用的轻量级cookie处理库,具有以下特性:适用于所有浏览器允许所有字符集支持ES6模块化、AMD和CommonJs模块化符合RFC6265。有一个wiki允许自定义编码和解码。体积小,不到800字节。安装:npmijs-cookie下面直接介绍使用方法吧。constCookies=require('js-cookie')基本用法:创建cookie,全站有效:Cookies.set('name','value')创建cookie,有效期为7天,跨站有效整个站点:Cookies.set('name','value',{expires:7})创建一个指定过期日期的cookie,对当前页面的路径有效:Cookies.set('name','value',{expires:7,path:''})读取cookie:Cookies.get('name')//=>'value'Cookies.get('nothing')//=>undefined读取所有cookies:Cookies.get()//=>{name:'value'}注意;无法通过cookie属性之一(在设置关联的cookie时可能使用或未使用)来读取特定的cookieCookies.get('foo',{domain:'sub.example.com'})//`域`不会有任何影响......!如果您的代码允许读取cookie,则只能通过.get()读取值为foo的cookie通过指定域和/或路径属性读取cookie不会有效删除cookie:Cookies.remove('name')删除对当前页面路径有效的cookie:Cookies.set('name','value',{path:''})Cookies.remove('name')//失败!,需要指定路径字段,如以下代码行Cookies.remove('name',{path:''})//已删除!重要的!删除cookie并且您已为此cookie指定了一些属性时,您必须传递用于设置cookie的完全相同的路径和域属性Cookies.remove('name',{path:'',domain:'.yourdomain.com'})注意:删除不存在的cookie既不会引发任何异常,也不会返回任何值同时,您可以保留并继续使用原来的命名空间。此方法在第三方站点上运行脚本时特别有用,例如作为小部件或SDK的一部分。例如:在当前网站上,已经有一个“window.Cookies”,那么我们作为第三方,可以通过Cookies.noConflict()函数重新赋值一个变量名,供我们的js-cookieapi使用,这里可以避免第三方和原网站的命名冲突varCookies2=Cookies.noConflict()Cookies2.set('name','value')注意:使用AMD或者CommonJS模块化规范方法时不需要.noConflict,所以它不会暴露在那些环境中。cookie属性的设置:可以通过withAttributes()创建一个cookieIns的实例,并设置Cookie属性的全局默认值,也可以将一个普通对象作为最后一个参数传递给Cookies.set(...)。每次调用Cookies.set(...)时,属性都会覆盖全局默认属性。使用withAttributes设置全局默认项:constcookiesIns=Cookies.withAttributes({path:'/',domain:'.example.com'})expires指定cookie何时过期并被删除。类型:Number,表示cookie创建后的天数或Date实例。如果省略,cookie将是一个会话cookie。要创建一天内过期的cookie,您可以查看wiki上的常见问题解答。默认值:是一个会话cookie,当用户关闭浏览器时cookie将被删除。示例:Cookies.set('name','value',{expires:365})Cookies.get('name')//=>'value'Cookies.remove('name')路径类型:字符串,指定cookie可见的路径。默认值:/示例:Cookies.set('name','value',{path:''})Cookies.get('name')//=>'value'Cookies.remove('name',{path:''})域类型:字符串,指定cookie可见的有效域(实际是域名)。该cookie也对该域名下的所有子域可见。默认值:cookie仅对创建cookie的页面的域或子域可见示例:假设在site.com上创建了一个cookie:Cookies.set('name','value',{domain:'subdomain.site.安全协议(https)默认值:false,不需要安全协议。Cookies.set('name','value',{secure:true})Cookies.get('name')//=>'value'Cookies.remove('name')sameSite类型:字符串,允许控制浏览是否使用跨站请求发送cookie默认值:未设置示例:Cookies.set('name','value',{sameSite:'strict'})Cookies.get('name')//=>'value'Cookies.remove('name')cookie读写操作转换器read(read)根据api,创建一个新的Cookie实例对象,在这个实例对象上,覆盖默认解码的函数实现。在这个库中,所有的get函数都是根据正确的解码函数执行的,例如:Cookies.get()和Cookies.get('name'),将为每个cookie运行给定的转换器,返回值是曲奇饼。例子:读取一个cookie,这个cookie只能通过转义函数进行解码function(value,name){if(name==='escaped'){returnunescape(value)}//对所有其他cookie使用原始解码returnCookies.converter.read(value,name)}})cookies.get('escaped')//北方cookies.get('default')//北方cookies.get()//{escaped:'North',default:'North'}write(写入)根据api,新建一个Cookie实例对象,并在这个实例对象上,覆盖默认编码的函数实现。示例:Cookies.withConverter({write:function(value,name){returnvalue.toUpperCase()}})Q&AFAQ如何设置cookie过期时间为一天以内?js-cookie的expires属性支持一个Data实例对象。这提供了很大的灵活性,因为Date实例可以指定任何时刻。示例:假设cookie在15分钟后过期varinFifteenMinutes=newDate(newDate().getTime()+15*60*1000);Cookies.set('foo','bar',{expires:inFifteenMinutes});也可以设置cookie的有效时间只有半天varinHalfADay=0.5;Cookies.set('foo','bar',{expires:inHalfADay});或半小时(30分钟)varin30Minutes=1/48;Cookies.set('foo','bar',{expires:in30Minutes});动动你的小手,欢迎来到我的GitHub:@huangyangquan??欢迎来到我的公众号:前端学长Joshua