轻量级JS Cookie插件js-cookie的使用方法

Cookie是网站设计者放置在客户端的小文本文件,一般后台语言使用的比较多,可以实现用户个性化的一些需求。js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级。js-cookie也支持npm和Bower安装和管理。下面看看js-cookie的具体用法。

A simple, lightweight JavaScript API for handling cookies

Works in all browsers
Accepts any character
Heavily tested
No dependency
Unobtrusive JSON support
Supports AMD/CommonJS
RFC 6265 compliant
Useful Wiki
Enable custom encoding/decoding
~900 bytes gzipped!

引用方法:

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'

2、js-cookie.js常用的API和方法

a、设置cookie

Cookies.set('name', 'value', { expires: 7, path: '' });//7天过期

Cookies.set('name', { foo: 'bar' });//设置一个json

b、读取cookie

Cookies.get('name');//获取cookie

Cookies.get(); #读取所有的cookie

c、删除cookie

Cookies.remove('name'); #删除cookie时必须是同一个路径。

下面是国外的介绍

Basic Usage

Create a cookie, valid across the entire site:

Cookies.set('name', 'value');

Create a cookie that expires 7 days from now, valid across the entire site:

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

Create an expiring cookie, valid to the path of the current page:

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

Read cookie:

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

Read all visible cookies:

Cookies.get(); // => { name: 'value' }

Delete cookie:

Cookies.remove('name');

Delete a cookie valid to the path of the current page:

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

IMPORTANT! When deleting a cookie, you must pass the exact same path and domain attributes that were used to set the cookie, unless you're relying on the default attributes.

Note: Removing a nonexistent cookie does not raise any exception nor return any value.

Namespace conflicts

If there is any danger of a conflict with the namespace Cookies, the noConflict method will allow you to define a new namespace and preserve the original one. This is especially useful when running the script on third party sites e.g. as part of a widget or SDK.

// Assign the js-cookie api to a different variable and restore the original "window.Cookies"

var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');

Note: The .noConflict method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments.

JSON

js-cookie provides unobtrusive JSON storage for cookies.

When creating a cookie you can pass an Array or Object Literal instead of a string in the value. If you do so, js-cookie will store the string representation of the object according to JSON.stringify:

Cookies.set('name', { foo: 'bar' });

When reading a cookie with the default Cookies.get api, you receive the string representation stored in the cookie:

Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }

When reading a cookie with the Cookies.getJSON api, you receive the parsed representation of the string stored in the cookie according to JSON.parse:

Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }

Note: To support IE6-7 (and IE 8 compatibility mode) you need to include the JSON-js polyfill: https://github.com/douglascrockford/JSON-js

更多的可以参考官方说明:

https://github.com/js-cookie/js-cookie

https://www.npmjs.com/package/js-cookie

(0)

相关推荐

  • 轻量级JS Cookie插件js-cookie的使用方法

    Cookie是网站设计者放置在客户端的小文本文件,一般后台语言使用的比较多,可以实现用户个性化的一些需求.js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级.js-cookie也支持npm和Bower安装和管理.下面看看js-cookie的具体用法. A simple, lightweight JavaScript API for handling cookies Works in all browsers Accepts any character H

  • JS面向对象编程 for Cookie

    各位如果有更好的见解可讨论下! 复制代码 代码如下: /* * Js Class Cookie * Author:Mr Co */ var Cookie = function(/*Cookie名称*/name){ this.$name = name; var allcookies = document.cookie; if(allcookies == '') return; var cookies = allcookies.split(';'); var cookie = null; for(v

  • JS操作COOKIE实现备忘记录的方法

    本文实例讲述了JS操作COOKIE实现备忘记录的方法.分享给大家供大家参考,具体如下: 具体涉及JS针对cookie的写入与获取操作,代码如下: function getCookie(c_name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start = c_start + c_name.length + 1;

  • JS保存和删除cookie操作 判断cookie是否存在

    有时我们需要用cookie保存用户名,记录登录状态,如何正确判断该机用户cookie是否存在呢?不能简单使用a!="这样的写法. 复制代码 代码如下: a=getCookie("username3"); c_start=document.cookie.indexOf("username3="); if(c_start == -1){  $("#login_form").show();     $("#logined"

  • JS 设置Cookie 有效期 检测cookie

    设置cookie 函数直接上代码: function setCookie(name, value, days) { //设置cookie var d = new Date(); d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + ";

  • JS设置cookie、读取cookie

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. js设置cookie方法汇总: 第一种: <script> //设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); v

  • jquery轻量级数字动画插件countUp.js使用详解

    CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址 展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title> <!-- 该特效该引入的js插件 --> <

  • JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • 轻量级的原生js日历插件calendar.js使用指南

    使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

随机推荐