$.cookie js的用法

合集下载

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

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

JS操作COOKIE实现备遗忘录的方法这篇文章主要介绍了JS操作COOKIE实现备遗忘录的方法,涉及JavaScript针对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;c_end = document.cookie.indexOf(";", c_start);if (c_end == -1){c_end = document.cookie.length;}return unescape(document.cookie.substring(c_start,c_end))}}return ""}function setCookie(c_name,value,expiredays){var exdate = new Date();exdate.setDate(exdate.getDate() + expiredays); document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }期望本文所述对大家JavaScript程序设计有所关怀。

JS操作Cookies

JS操作Cookies

JS操作Cookies一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js 读取cookie,js添加cookie,js删除cookie,示例如下://添加cookiefunction addCookie(name,value,expires,path,domain){var str=name+"="+escape(value);if(expires!=""){var date=new Date();date.setTime(date.getTime()+expires*24*3600*1000);//expir es单位为天str+=";expires="+date.toGMTString();}if(path!=""){str+=";path="+path;//指定可访问cookie的目录}if(domain!=""){str+=";domain="+domain;//指定可访问cookie的域}document.cookie=str;}//取得cookiefunction getCookie(name){var str=document.cookie.split(";")for(var i=0;i<str.length;i++){< p="">var s tr2=str[i].split(”=”);if(str2[0]==name)return unescape(str2[1]);}}//删除cookiefunction delCookie(name){var date=new Date();date.setTime(date.getTime()-10000);document.cookie=name+”=n;expire=”+date.toGMTString();[下面讲的经个人觉得比较好哦!]我们当然还得介绍cookie的四个属性。

js-cookie用法详解

js-cookie用法详解

js-cookie⽤法详解安装://以下⼏种都可以⽤:1、引⼊js-cookie.js1.直接饮⽤cdn:<script src="https:///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'⼀、下载cookienpm install js-cookie⼆、当前页⾯引⽤cookieimport Cookies from "js-cookie";三、cookie在当前的使⽤(⽅法⼀)// 组件中使⽤// 写⼊cookieCookies.set('name', 'value')// 读取Cookies.get('name') // => 'value'Cookies.get('nothing') // => undefined// 读取所有可见的cookieCookies.get()// 删除某项cookie值Cookies.remove('name')四、cookie在全局使⽤(⽅法⼆)main.jsimport Cookies from 'js-cookie'五、cookie设置过期时间//1、存cookie set⽅法⽀持的属性有: expires->过期时间 path->设置为指定页⾯创建cookie domain-》设置对指定域名及指定域名的⼦域名可见 secure->值有false和true ,表⽰设置是否只⽀持https,默认是false Cookies.set('key', 'value'); //创建简单的cookieCookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookieCookies.set('key', 'value', { expires: 17, path: '' }); //可以通过配置path,为当前页创建有效期7天的cookie//2、取cookieCookies.get('key'); // 获取指定key 对应的valueCookies.get(); //获取所有value//3、删除cookieCookies.remove('key');//删除普通的cookieCookies.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' } }举例⼆:背景:业务需要在前端进⾏数据的缓存,到期就删除再进⾏获取新数据。

js读取cookie方法总结

js读取cookie方法总结

js读取cookie⽅法总结本⽂实例总结了js读取cookie⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下:⼀般关于js读取cookie⽅法有很多,我们下⾯的实例函数主要是利⽤split函数来分切,和document.cookie获取所有cookie再利⽤for遍历所有数组,判断如果cookie名相同,那么这个cookie 就是我们要找的。

⽅法⼀复制代码代码如下:var acookie=document.cookie.split("; ");function getck(sname){//获取单个cookiesfor(var i=0;i<acookie.length;i++){var arr=acookie[i].split("=");if(sname==arr[0]){if(arr.length>1)return unescape(arr[1]);elsereturn "";}}return "";}⽅法⼆复制代码代码如下:function getcookie(objname){//获取指定名称的cookie的值var arrstr = document.cookie.split("; ");for(var i = 0;i < arrstr.length;i ++){var temp = arrstr[i].split("=");if(temp[0] == objname) return unescape(temp[1]);}}⽅法三复制代码代码如下:function getcookie(cookiename){var cookiestring = document.cookie;var start = cookiestring.indexof(cookiename + '= ');if (start == -1) // 找不到return null;start += cookiename.length + 1;var end = cookiestring.indexof( "; ", start);if (end == -1) return unescape(cookiestring.substring(start));return unescape(cookiestring.substring(start, end));}⽅法四复制代码代码如下:function readcookie(name){var cookievalue = "";var search = name + "=";if(document.cookie.length > 0){offset = document.cookie.indexof(search);if (offset != -1){offset += search.length;end = document.cookie.indexof(";", offset);if (end == -1) end = document.cookie.length;cookievalue = unescape(document.cookie.substring(offset, end)) }}return cookievalue;}希望本⽂所述对⼤家的javascript程序设计有所帮助。

jscookie参数

jscookie参数

jscookie参数在JavaScript中,Cookie是一种在Web服务器和浏览器之间传递的小型数据片段。

Cookie数据被存储在浏览器的Cookie文件中,并且每次浏览器向同一个服务器发送请求时,都会将这些Cookie信息包含在请求头中一起发送给服务器。

Cookie主要用于在用户的浏览器和服务器之间保存状态信息,以实现用户登录、购物车等功能。

在使用JavaScript设置Cookie时,可以传递各种参数来控制Cookie的行为。

下面是一些常用的Cookie参数:1. 名称(name):指定Cookie的名字,可以自定义,例如"name"。

2. 值(value):指定Cookie的值,可以是任意字符串,例如"value"。

3. 过期时间(expires):指定Cookie的过期时间,可以是一个具体的日期对象或一个表示过期时间的字符串,例如"Fri, 31 Dec 9999 23:59:59 GMT"。

5. 路径(path):指定Cookie的生效路径,表示在哪个路径下发送请求时发送Cookie,例如"/path"。

6. 安全标记(secure):指定Cookie是否只能通过安全连接(HTTPS)发送,如果设置为true,则只有在HTTPS连接下才会发送Cookie。

7. SameSite策略(samesite):指定Cookie的SameSite属性,用于防止CSRF攻击。

可以设置为"strict"、"lax"或"none"。

下面是一个设置Cookie的示例:```javascript```要读取Cookie的值,可以使用`document.cookie`来访问当前网页的所有Cookie信息,并使用一些字符串处理方法来获取特定的Cookie值。

```javascriptfunction getCookie(name)var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++)var cookie = cookies[i].trim(;if (cookie.startsWith(name + '='))return cookie.substring(name.length + 1);}}return null;var value = getCookie('name');console.log(value); // 输出Cookie的值```这个示例定义了一个`getCookie`函数,通过遍历所有的Cookie信息来查找特定名称的Cookie,然后返回对应的值。

js获取指定 cookie的方法

js获取指定 cookie的方法

一、概述在Web开发过程中,经常会涉及到对cookie的操作。

cookie是服务器存储在用户计算机上的小型文本文件,它包含有关用户访问全球信息站的信息。

在JavaScript中,我们经常需要获取特定的cookie值以便进行相关操作。

本文将介绍如何使用JavaScript获取特定cookie 的值。

二、使用document.cookie获取所有cookie在JavaScript中,我们可以使用document对象的cookie属性来获取所有的cookie。

该属性将返回文档中所有的cookie信息,以字符串的形式返回。

可以通过解析该字符串来获取特定cookie的值。

下面是一个简单的示例代码:```var allCookies = document.cookie;console.log(allCookies);```该代码将打印出所有的cookie信息,例如"cookie1=value1; cookie2=value2; cookie3=value3;"。

我们可以使用字符串操作方法来获取特定cookie的值。

三、使用函数获取特定cookie的值为了方便起见,我们可以使用一个函数来获取特定cookie的值。

下面是一个获取特定cookie值的示例代码:```function getCookie(cookieName) {var name = cookieName + "=";var decodedCookie =decodeURIComponent(document.cookie);var cookieArray = decodedCookie.split(';');for (var i = 0; i < cookieArray.length; i++) {var cookie = cookieArray[i];while (cookie.charAt(0) == ' ') {cookie = cookie.substring(1);}if (cookie.indexOf(name) == 0) {return cookie.substring(name.length, cookie.length);}}return "";}var cookieValue = getCookie("cookieName");console.log(cookieValue);```该代码定义了一个名为getCookie的函数,该函数接受一个参数cookieName,并返回对应cookie的值。

前端教程:JavaScriptCookies

前端教程:JavaScriptCookies

前端教程:JavaScriptCookiesWeb浏览器和服务器使用HTTP协议进行通信,并且HTTP是一种无状态协议。

但对于一个商业网站它需要保持不同的页面间的会话信息。

例如在完成多页后,一个用户注册结束。

但是,如何保持所有网页用户的会话信息。

在许多情况下,使用Cookie来记忆和跟踪的喜好,采购,佣金,并要求更好的访问体验或网站的统计数据等信息的最有效的方法。

它是如何工作的 ?服务器发送一些数据到访问者的浏览器以cookie的形式。

该浏览器可以接受cookie。

如果是这样,它是为访问者存储在硬盘驱动器上的一个纯文本的记录。

现在,当访问者到达您的网站其他页面,浏览器发送相同cookie到服务器进行检索。

一旦检索到,服务器知道/记得刚才发生了什么存储。

Cookies有5个可变长度字段的纯文本数据记录:Expires : cookie将过期的日期。

如果这是空白的,那么就是当访问者退出浏览器cookie将到期。

Domain : 网站的域名。

Path : 路径设置 cookie 目录或网页。

如果想要从任何目录或页面,那么cookie 是空的。

Secure : 如果该字段包含“安全”二字,那么cookie仅可检索到一个安全的服务器。

如果该字段为空,没有限制存在。

Name=Value : Cookie设置在键和值对的形式来获取。

Cookie最初设计用于CGI编程和cookies的数据是在Web浏览器和Web服务器之间自动传输的,所以在服务器上的CGI脚本可以读取和写入存储在客户端上的cookie的值。

JavaScript的也可以操作使用文档对象的cookie属性。

JavaScript可以读取,创建,修改和删除适用于当前网页的cookie或Cookies。

储存Cookies:创建一个cookie的最简单的方法是一个字符串值分配到document.cookie对象,它是这样的:语法document.cookie = "key1=value1;key2=value2;expires=dat e";1复制代码类型:[javascript]在这里,expires属性选项。

原生JS购物车及购物页面的cookie使用方法

原生JS购物车及购物页面的cookie使用方法

原⽣JS购物车及购物页⾯的cookie使⽤⽅法直接上代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物页⾯</title><style>ul{list-style:none;padding:0;margin:0;}.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}.goods li:hover{}.goods .price{color:#f00;font-weight:bold;}.goods .price::before{content:"¥";}</style><script>window.onload = function(){var goods = document.getElementsByClassName('goods')[0];// ⽤于保存购物车商品信息var carList = [];// 先获取当前cookievar cookies = document.cookie.split('; ');for(var i=0;i<cookies.length;i++){var arr = cookies[i].split('=');if(arr[0] === 'carlist'){carList = JSON.parse(arr[1]);}}// 事件委托goods.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 添加到购物车if(target.tagName.toLowerCase() === 'button'){// 获取当前livar currentLi = target.parentElement.parentElement;var children = currentLi.children;var currentGUID = currentLi.getAttribute('data-guid');// 先创建⼀个对象保存当前商品信息var goodsObj = {};goodsObj.guid = currentGUID;goodsObj.qty = 1; = children[1].innerHTML;goodsObj.price = children[2].innerHTML;goodsObj.imgUrl = children[0].src;// 如果cookie为空,则直接添加if(carList.length===0){// 添加到carListcarList.push(goodsObj);}else{// 先判断cookie中有⽆相同的guid商品for(var i=0;i<carList.length;i++){// 如果商品已经存在cookie中,则数量+1if(carList[i].guid === currentGUID){carList[i].qty++;break;}}// 如果原cookie中没有当前商品if(i===carList.length){// 添加到carListcarList.push(goodsObj);}}// 存⼊cookie// 把对象/数组转换诚json字符串:JSON.stringify()document.cookie = 'carlist=' + JSON.stringify(carList);}}}</script></head><body><ul class="goods"><li data-guid="g01"><img src="images/shirt_1.jpg"><p>短袖衬⾐</p><p class="price">98.88</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guid="g02"><img src="images/shirt_2.jpg"><p>短袖衬⾐2</p><p class="price">88.88</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guid="g03"><img src="images/shirt_3.jpg"><p>短袖衬⾐3</p><p class="price">9.98</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guid="g04"><img src="images/shirt_4.jpg"><p>短袖衬⾐4</p><p class="price">8.88</p><div class="add2cart"><button>添加到购物车</button></div></li></ul><a href="04car.html" rel="external nofollow" >去结算</a></body></html>//购物车页⾯<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物车</title><style>#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;} #carList img{display:block;width:100px;}#carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}#carList li .btn-close:hover{color:#fff;}.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}#carList .price{color:#f00;}.price::before{content:'¥';font-size:11px;}#carList .price span{font-size:11px;}</style><script>window.onload = function(){/*读取cookie中的carlist把json字符串转换成对象/数组:JSON.parse()json字符串格式:1.必须⽤双引号2.不能右注释*/var oCarList = document.getElementById('carList');var oSubPrice = oCarList.nextElementSibling;var btnClear = document.getElementById('btnClear');var carList;var cookies = document.cookie.split('; ');for(var i=0;i<cookies.length;i++){var arr = cookies[i].split('=');if(arr[0] === 'carlist'){console.log(JSON.parse(arr[1]));carList = JSON.parse(arr[1]);}}var subPrice = 0;if(carList){var ul = document.createElement('ul');for(var i=0;i<carList.length;i++){var li = document.createElement('li');// 给每个li添加data-guid属性li.setAttribute('data-guid',carList[i].guid);// 商品名var title = document.createElement('h4');title.innerHTML = carList[i].name;// 商品价格var price = document.createElement('p');price.className = 'price';price.innerHTML = carList[i].price + '&times;' + carList[i].qty;// 商品图⽚var img = document.createElement('img');img.src = carList[i].imgUrl;// 添加删除按钮var btnClose = document.createElement('span');btnClose.innerHTML = '&times;';btnClose.className = 'btn-close';// 计算总价subPrice += carList[i].price*carList[i].qty;li.appendChild(title);li.appendChild(price);li.appendChild(img);li.appendChild(btnClose);ul.appendChild(li);}// 写⼊页⾯oCarList.appendChild(ul);// 写⼊总价// toFixed(n)获取⼩数点后n位(⾃动四舍五⼊,Number类型的⽅法)oSubPrice.innerHTML = '<span class="price">' + subPrice.toFixed(2) + '</span>'; }// 删除商品oCarList.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 是否点击了删除按钮if(target.className === 'btn-close'){var currentLi = target.parentElement;// 获取当前guidvar currentGUID = currentLi.getAttribute('data-guid');// 删除cookie中对应的商品// 根据guid取对⽐for(var i=0;i<carList.length;i++){// 找出要删除的商品if(carList[i].guid === currentGUID){carList.splice(i,1);break;}}// 更新cookiedocument.cookie = 'carlist=' + JSON.stringify(carList);// 删除li节点currentLi.parentElement.removeChild(currentLi);}}// 清空购物车// 1、删除DOM节点// 2、删除cookiebtnClear.onclick = function(){oCarList.innerHTML = '';oSubPrice.innerHTML = '';// 利⽤设置有效期位过期事件来达到删除cookie的效果var now = new Date();now.setDate(now.getDate()-7);document.cookie = 'carlist=xx;expires=' + now;}}</script></head><body><h1>购物车</h1><div id="carList"></div><div class="subPrice"></div><a href="#" rel="external nofollow" id="btnClear">清空购物车</a></body></html>以上这篇原⽣JS 购物车及购物页⾯的cookie使⽤⽅法就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

$.cookie js的用法
一、概述
$.cookie是一款用于操作浏览器的Cookie的工具库,主要用于存储一些用户信息,以便在后续的页面加载中可以读取。

它提供了简单易用的API,可以方便地设置、读取、删除Cookie。

二、基本用法
1.设置Cookie:
可以使用$.cookie的set方法来设置Cookie,例如:
```javascript
$.cookie('username','张三');
```
上述代码将名为'username'的Cookie设置为'张三'。

2.读取Cookie:
可以使用$.cookie的get方法来读取Cookie的值,例如:
```javascript
varusername=$.cookie('username');
```
上述代码将读取名为'username'的Cookie的值,并将其存储在变量username中。

3.删除Cookie:
可以使用$.cookie的remove方法来删除Cookie,例如:
```javascript
$.cookie.remove('username');
```
上述代码将删除名为'username'的Cookie。

三、选项设置
$.cookie提供了丰富的选项设置,可以自定义Cookie的名称、值、过期时间、路径、域等属性。

例如:
```javascript
$.cookie('username','张三',{expires:7,path:'/'});
```
上述代码将名为'username'的Cookie设置为'张三',过期时间为7天,路径为当前目录下的所有子目录。

四、跨域设置
$.cookie支持跨域设置Cookie,但是需要注意安全问题。

在设置跨域Cookie时,需要确保服务器允许跨域访问Cookie,并且在客户端和服务器之间建立安全的通信通道,以防止XSS攻击等安全问题。

五、常见问题及解决方案
1.Cookie值不能为空:在使用$.cookie设置或读取Cookie时,需要注意Cookie的值不能为空。

如果为空,可能会导致Cookie无法正常存储或读取。

解决方案是在设置或读取时使用默认值或非空字符串。

2.Cookie被浏览器删除:在某些情况下,浏览器可能会自动删除某些Cookie。

这可能是由于浏览器的隐私设置、安全策略等原因导致的。

解决方案是检查浏览器的隐私设置和安全策略,并确保Cookie的设置符合要求。

3.Cookie无法在页面加载时获取:在使用$.cookie获取Cookie 时,如果页面加载时无法获取到Cookie的值,可能是由于Cookie的
路径、域名等属性设置不正确导致的。

解决方案是检查Cookie的设置,确保其路径、域名等属性符合要求。

相关文档
最新文档