搜索
您的当前位置:首页正文

javascript中方便增删改cookie的一个类_javascript技巧

2023-12-03 来源:字库网

主要是通过对document.cookie字符串的分析来进行功能的组装的。 温习一下javascript中对cookie的操作: 增加cookie可以用document.cookie="userId=111";来实现 完整版可以用:document.cookie="userId=111;domain=.google.com;path=;secure=secure;expire="+date.toGMTString(); 可以设置cookie的过期时间,域名,路径 需要删除只要将expire的时间设为现在之前就可以了 现在上我修改的javascript.cookie.js的类 代码如下: /* cookie helper class easy to write,get,delete */ var myCookie={ get:function(name){ if(typeof name != "undefined") { //if name given call the get value function return myCookie_get(name); }else{ //if name is not given,i want get all the cookie item return myCookie_getAll(); } }, add:function(name,value,options){ //write the cookie myCookie_add(name,value,options); }, delete:function(name){ //delete the cookie myCookie_add(name,null); } } String.prototype.Trim = function() { return this.replace(/^s+/g,"").replace(/s+$/g,""); } /* cookie write function @name:the cookie name not null @value:the cookie value null==delete the cookie @option:{"expires":expire time;"path":/;"domain":localhost;"secure":secure} */ function myCookie_add(name,value,options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } var path = options.path ? '; path=' + options.path : ''; var domain = options.domain ? '; domain=' + options.domain : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } } /* get the name cookie @name:the cookie's name */ function myCookie_get(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].Trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } /* get all the cookie return as a json */ function myCookie_getAll() { var cookieArray = new Array(); var str=""; var temp; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].Trim(); temp=cookie.split('='); //take the cookieArray.push("{"name":""+decodeURIComponent(temp[0])+"","value":""+decodeURIComponent(temp[1])+""}"); } str=cookieArray.join(","); } str="["+str+"]"; return eval('('+str+')'); } 调用也是相当简单 代码如下: myCookie.add("useraccount","admin",{"expires":5});//加入一个期限为5天的cookie alert(myCookie.get("useraccount"));//取出cookie cookies=myCookie.get();//得到所有的cookie for(var i=0;i小编还为您整理了以下内容,可能对您也有帮助:

javascript如何操作cooike,比如新建和销毁

function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值

{

var Days = 30; //此 cookie 将被保存 30 天

var exp = new Date(); //new Date("December 31, 9998");

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

function getCookie(name)//取cookies函数

{

var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

if(arr != null) return unescape(arr[2]); return null;

}

function delCookie(name)//删除cookie

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

SetCookie ("xiaoqi", "3")

alert(getCookie('xiaoqi'));

JavaScript提供的Cookie属性有哪些


JavaScript提供的Cookie属性有:expires属性(声明Cookie的到期时间),max-age属性(声明Cookie活动的最大时间),domain属性(定义有效域名),path属性。
Cookie是什么?
Cookie是服务器端和客户端之间持续存在的大量信息,Web浏览器在浏览时会将这些信息存储下来。
Cookie通常采用以分号分隔的name-value对的形式来将信息作为字符串包含;它维护用户的状态并记住网页中的用户信息。
如何在JavaScript中创建Cookie?
在JavaScript中,我们可以使用document.cookie属性创建,读取,更新和删除cookie 。
创建cookie的基本语法:
document.cookie = “name = value” ;JavaScript的Cookie属性
JavaScript提供了一些可选属性来增强cookie的功能,我们来看看这些属性:
expires属性:
可以将cookie的状态保持到指定的日期和时间;也就是说,它声明了表示cookie活动期间的日期和时间,是创建持久cookie的方法之一。
例:设置“username = Gxl网”对的cookie的有效期到2030年,8月20日,12:00:00
document.cookie = “username = Gxl网; expires = Sun,20 Aug 2030 12:00:00 UTC” ;注:expires属性,一旦声明的时间是过去(任何过去的时间都可以),就会自动删除cookie;它也是删除cookie的一种方法。
例:设置有效期到1970年,1月1日,00:00:00

document.cookie = "username=Gxl网; expires= Thu, 01 Jan 1970 00:00:00 GMT";max-age属性
可以将cookie的状态保持到指定的时间,时间是以秒为单位计算的。它也是创建持久cookie的方法之一。
document.cookie = "username =Gxl网; max-age =" +(60 * 60 * 24 * 365)+";"注:使用max-age属性同样可以删除cookie,只需要向max-age属性提供零或负数(表示秒数)就可。
document.cookie = "name = Gxl网; max-age = 0" ;domain属性
它是用于指定cookie有效的域;使得cookie在指定域名中,才会有效。
假设我们为domain属性提供任何域名,例如:
domain = php .cn这里,cookie对给定域及其所有子域都有效。
但是,如果我们为属性提供任何子域,例如:
domain=img.php .cn这里,cookie仅对给定的子域有效。因此,给cookie提供域名而不是子域名来让cookie在指定域名下有效是一种更好的方法。
path属性:将cookie的范围扩展到网站的所有页面
JavaScript Cookie的简单示例
示例:JavaScript创建Cookie,获取Cookie,读取Cookie
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>效果图:
当输入名字,按“确定”按钮后,刷新当前页面,会出现:
总结:

JavaScript提供的Cookie属性有哪些


JavaScript提供的Cookie属性有:expires属性(声明Cookie的到期时间),max-age属性(声明Cookie活动的最大时间),domain属性(定义有效域名),path属性。
Cookie是什么?
Cookie是服务器端和客户端之间持续存在的大量信息,Web浏览器在浏览时会将这些信息存储下来。
Cookie通常采用以分号分隔的name-value对的形式来将信息作为字符串包含;它维护用户的状态并记住网页中的用户信息。
如何在JavaScript中创建Cookie?
在JavaScript中,我们可以使用document.cookie属性创建,读取,更新和删除cookie 。
创建cookie的基本语法:
document.cookie = “name = value” ;JavaScript的Cookie属性
JavaScript提供了一些可选属性来增强cookie的功能,我们来看看这些属性:
expires属性:
可以将cookie的状态保持到指定的日期和时间;也就是说,它声明了表示cookie活动期间的日期和时间,是创建持久cookie的方法之一。
例:设置“username = Gxl网”对的cookie的有效期到2030年,8月20日,12:00:00
document.cookie = “username = Gxl网; expires = Sun,20 Aug 2030 12:00:00 UTC” ;注:expires属性,一旦声明的时间是过去(任何过去的时间都可以),就会自动删除cookie;它也是删除cookie的一种方法。
例:设置有效期到1970年,1月1日,00:00:00

document.cookie = "username=Gxl网; expires= Thu, 01 Jan 1970 00:00:00 GMT";max-age属性
可以将cookie的状态保持到指定的时间,时间是以秒为单位计算的。它也是创建持久cookie的方法之一。
document.cookie = "username =Gxl网; max-age =" +(60 * 60 * 24 * 365)+";"注:使用max-age属性同样可以删除cookie,只需要向max-age属性提供零或负数(表示秒数)就可。
document.cookie = "name = Gxl网; max-age = 0" ;domain属性
它是用于指定cookie有效的域;使得cookie在指定域名中,才会有效。
假设我们为domain属性提供任何域名,例如:
domain = php .cn这里,cookie对给定域及其所有子域都有效。
但是,如果我们为属性提供任何子域,例如:
domain=img.php .cn这里,cookie仅对给定的子域有效。因此,给cookie提供域名而不是子域名来让cookie在指定域名下有效是一种更好的方法。
path属性:将cookie的范围扩展到网站的所有页面
JavaScript Cookie的简单示例
示例:JavaScript创建Cookie,获取Cookie,读取Cookie
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>效果图:
当输入名字,按“确定”按钮后,刷新当前页面,会出现:
总结:

js怎么设置cookie得到cookie删除cookie

javascript对cookie的操作

设置cookie

    function setCookie(name,value)

    {

    var Days = 30;

    var exp = new Date();

    exp.setTime(exp.getTime() + Days*24*60*60*1000);

    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

    }

 2.读取cookie

    function getCookie(name)

    {

    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

    return unescape(arr[2]);

    else

    return null;

    }

3.删除cookie

    function delCookie(name)

    {

    var exp = new Date();

    exp.setTime(exp.getTime() - 1);

    var cval=getCookie(name);

    if(cval!=null)

    document.cookie= name + "="+cval+";expires="+exp.toGMTString();

    }

js怎么设置cookie得到cookie删除cookie

javascript对cookie的操作

设置cookie

    function setCookie(name,value)

    {

    var Days = 30;

    var exp = new Date();

    exp.setTime(exp.getTime() + Days*24*60*60*1000);

    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

    }

 2.读取cookie

    function getCookie(name)

    {

    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

    return unescape(arr[2]);

    else

    return null;

    }

3.删除cookie

    function delCookie(name)

    {

    var exp = new Date();

    exp.setTime(exp.getTime() - 1);

    var cval=getCookie(name);

    if(cval!=null)

    document.cookie= name + "="+cval+";expires="+exp.toGMTString();

    }

JS 操作 cookies 的方法

在 JS(JavaScript) 操作cookies比较复杂,在 ASP 里面我们只需要知道 cookie 的名称、cookie 的值就行了,而 JS 里面,我们面对的是 cookie 的字符串,你自己编写这个字符串写入客户端,然后自己解析这个字符串。

一、从写 cookie 说起。

var the_date = new Date("December 31, 2020");

var expiresDate = the_date.toGMTString();

document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;

第一句是日期对象;

第二句将日期格式转换成 GMT 格式;编者者: GMT 即格林威治标准时间,现在也称 UTC 即全球标准时间。

第三句是将 cookie 内容写入客户端。

其中 expires 是系统使用的,表示 cookie 的失效日期(也可以省略),expires 不可读。

escape 是对 cookie 值进行编码,这是为了处理中文、空格等而设立的。

二、取 cookie 是比较简单的。

function GetCSS()

{

var cookieStr = document.cookie; //取 cookie 字符串,由于 expires 不可读,所以 expires 将不会出现在 cookieStr 中。

if (cookieStr == "")

{

return "main1"; //没有取到 cookie 字符串,返回默认值

}

var cookieValue = cookieStr.split("; "); //将各个 cookie 分隔开,并存为数组,多个 cookie 之间用分号加空隔隔开,不过前面我们只使用了一个 cookie,它的值与 expires 之间也是用分号加空格隔开的

var varName = "userDefineCSS";

var startPos = -1;

var endPos = -1;

for (var i=0; i<cookieValue.length; i++)

{

startPos = cookieValue[i].indexOf(varName);

if (startPos != 0)

{

continue; //当前 cookie 不是名称为 varName 的 cookie,判断下一个 cookie

}

startPos += varName.length + 1; //当前 cookie 就是名称为 varName 的 cookie,由于有等号,所以 +1

endPos = cookieValue[i].length;

var css = unescape(cookieValue[i].substring(startPos, endPos));

return css;

}

return "main1";

}

在JavaScript中如何实现读取和写入cookie


本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点,有这方面需要的朋友参考下吧。
首先先让我们简单地了解一下cookie.
在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cookie机制了。简单说来,cookie提供了一种便捷的方式,能够在用户的计算机上保存少量数据并且远程获得它们,从而让网站可以保存一些细节信息,比如用户的习惯设置或是上一次访问网站的时间。cookie本身是一些短小的信息,能够由页面保存在用户的计算机上,然后被其他页面读取。cookie一般都设置为在一定时间后失效。
当然,cookie也有局限之处:浏览器对于能够保存的cookie数量有所*,通常是几百个或者多一点。一般情况下,每个域名20个cookies是允许的,而每个域最多能保存4KB的cookie.除了大小*可能导致的问题,也有很多原因会引起硬盘上的cookie消失,比如达到有效期限了,或是用户清理了cookie信息,或是换用了其他浏览器。因此,cookie不适合用来保存重要数据,在编写代码时也要考虑到cookie获取异常的处理方法。
在JavaScript中,使用document对象的cookie属性来储存和获取cookie.通常,document.cookie里的信息是由成对的名称和值组成的字符串,每一对数据的形式是:
name=value;下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.
首先是createCookie.html,在该页面中会创建一个cookie,完整的代码如下:
<html>
<head>
<title>createCookie</title>
<script>
function createCookie(){
//get name and password
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
//create cookie
document.cookie = name+'|'+pwd;
//go to showCookie.html page
window.location.href = "showCookie.html";
}
</script>
</head>
<body>
Userame: <input id="name" type="text" /><br><br>
Password: <input id="pwd" type="password" /><br><br>
<button onclick="createCookie()">Submit</submit>
</body>
</html>该页面的截图如下:
点击submit按钮,就会创建一个cookie,在该cookie中保存了Username和Password信息,并且会跳转到showCookie.html页面。其中,showCookie.html页面的完整代码如下:
<html>
<head>
<title>showCookie</title>
<script>
function showCookie(){
//document.cookie is a string, using split() function to get cookie date in array form
var arr = document.cookie.split('|');
//processing data in cookie
var cookie_info = 'Data in cookie:<br>username is: '+arr[0]+"<br>password is: "+arr[1]+'<br>';
//set content of element of id "res"
document.getElementById("res").innerHTML = cookie_info;
}
</script>
</head>
<body>
<button onclick="showCookie()">Show Cookie</button>
<p id="res"></p>
</body>
</html>页面截图如下:
点击show Cookie按钮就会显示cookie里面的信息了。
下面,我们将会在本地和服务器上分别跑这个程序,分别在IE浏览器和Chrome浏览器上运行这个程序,看看cookie的运行情况。
首先我们在本地运行这个程序,我们将上述两个文件都放在E盘中。先在IE浏览器上运行,在createCookie.html页面上输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
cookie在本地环境中的IE浏览器中运行正常。
接下来,我们看看在Chrome浏览器中运行情况,首先在Chrome浏览器中打开createCookie.html页面,输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
同样的程序,这次cookie在Chrome浏览器中却运行失败了。
接着让我们在服务器中运行这个程序,需要用到xampp,并打开Apache服务器,将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下(具体的操作方法可以参考这篇博客:JavaScript之使用AJAX(适合初学者))。我们现在IE浏览器中运行该程序,在IE浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
然后我们在Chrome浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
这次在服务器环境下,IE浏览器和Chrome浏览器的cookie都运行正常!
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
如何看待vue中的深复制
在vue中scroller返回页面并且记住滚动位置如何实现
vue+springboot如何实现单点登录跨域问题(详细教程)

在JavaScript中如何实现读取和写入cookie


本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点,有这方面需要的朋友参考下吧。
首先先让我们简单地了解一下cookie.
在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cookie机制了。简单说来,cookie提供了一种便捷的方式,能够在用户的计算机上保存少量数据并且远程获得它们,从而让网站可以保存一些细节信息,比如用户的习惯设置或是上一次访问网站的时间。cookie本身是一些短小的信息,能够由页面保存在用户的计算机上,然后被其他页面读取。cookie一般都设置为在一定时间后失效。
当然,cookie也有局限之处:浏览器对于能够保存的cookie数量有所*,通常是几百个或者多一点。一般情况下,每个域名20个cookies是允许的,而每个域最多能保存4KB的cookie.除了大小*可能导致的问题,也有很多原因会引起硬盘上的cookie消失,比如达到有效期限了,或是用户清理了cookie信息,或是换用了其他浏览器。因此,cookie不适合用来保存重要数据,在编写代码时也要考虑到cookie获取异常的处理方法。
在JavaScript中,使用document对象的cookie属性来储存和获取cookie.通常,document.cookie里的信息是由成对的名称和值组成的字符串,每一对数据的形式是:
name=value;下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.
首先是createCookie.html,在该页面中会创建一个cookie,完整的代码如下:
<html>
<head>
<title>createCookie</title>
<script>
function createCookie(){
//get name and password
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
//create cookie
document.cookie = name+'|'+pwd;
//go to showCookie.html page
window.location.href = "showCookie.html";
}
</script>
</head>
<body>
Userame: <input id="name" type="text" /><br><br>
Password: <input id="pwd" type="password" /><br><br>
<button onclick="createCookie()">Submit</submit>
</body>
</html>该页面的截图如下:
点击submit按钮,就会创建一个cookie,在该cookie中保存了Username和Password信息,并且会跳转到showCookie.html页面。其中,showCookie.html页面的完整代码如下:
<html>
<head>
<title>showCookie</title>
<script>
function showCookie(){
//document.cookie is a string, using split() function to get cookie date in array form
var arr = document.cookie.split('|');
//processing data in cookie
var cookie_info = 'Data in cookie:<br>username is: '+arr[0]+"<br>password is: "+arr[1]+'<br>';
//set content of element of id "res"
document.getElementById("res").innerHTML = cookie_info;
}
</script>
</head>
<body>
<button onclick="showCookie()">Show Cookie</button>
<p id="res"></p>
</body>
</html>页面截图如下:
点击show Cookie按钮就会显示cookie里面的信息了。
下面,我们将会在本地和服务器上分别跑这个程序,分别在IE浏览器和Chrome浏览器上运行这个程序,看看cookie的运行情况。
首先我们在本地运行这个程序,我们将上述两个文件都放在E盘中。先在IE浏览器上运行,在createCookie.html页面上输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
cookie在本地环境中的IE浏览器中运行正常。
接下来,我们看看在Chrome浏览器中运行情况,首先在Chrome浏览器中打开createCookie.html页面,输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
同样的程序,这次cookie在Chrome浏览器中却运行失败了。
接着让我们在服务器中运行这个程序,需要用到xampp,并打开Apache服务器,将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下(具体的操作方法可以参考这篇博客:JavaScript之使用AJAX(适合初学者))。我们现在IE浏览器中运行该程序,在IE浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
然后我们在Chrome浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
这次在服务器环境下,IE浏览器和Chrome浏览器的cookie都运行正常!
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
如何看待vue中的深复制
在vue中scroller返回页面并且记住滚动位置如何实现
vue+springboot如何实现单点登录跨域问题(详细教程)

javascript 怎样清除cookie

原来一直以为只要设置javascript的document.cookie对象就能简单的在浏览器端设置和删除cookie值,网上很多文章也是这么教的,但是最近发现简单的设置javascript的

document.cookie的值无法完全做到删除或更改cookie。偶然发现了一篇文章给出了正确的方法,这里贴出来。使用JavaScript清理Cookie首先要找到该Cookie对应的Name对应的值,然后设置其为过期: 

找到Cookie有下面方法:找到后设置为过期,切记设置domain和path,只有这两个参数跟你要删除的参数完全一样才能把它删除掉。

至于如何详细查看cookie的path和domain之类的东西,在firefox中可以根据以下步骤查看: 

Tools->Option->Privacy->Show Cookie

javascript 调整 COOKIE

你换一种写法,在cookie中只放一个键值对,名称叫cart,这个cart的值是数组,而不只是一个元素,设置值的时候,将数组转换成JSON串再写;读取值的时候,将值读取出来后,再转换成JSON对象,就可以直接操作数组了。如:

var cart = [0, 1, 2, 3, 2, 1, 0];
// 写cookie
setCookie('cart', JSON.stringify(cart));
// 读取cookie
cart = JSON.parse(getCookie('cart'));

javascript 调整 COOKIE

你换一种写法,在cookie中只放一个键值对,名称叫cart,这个cart的值是数组,而不只是一个元素,设置值的时候,将数组转换成JSON串再写;读取值的时候,将值读取出来后,再转换成JSON对象,就可以直接操作数组了。如:

var cart = [0, 1, 2, 3, 2, 1, 0];
// 写cookie
setCookie('cart', JSON.stringify(cart));
// 读取cookie
cart = JSON.parse(getCookie('cart'));

怎么用JavaScript删除Chrome中的cookie和网站数据?

你好,

首先你要区分清楚Cookie和本地存储的网站数据。

如题所述网络上所描述的删除的document.cookie,指的是删除上图所示“Cookies”选项中的内容,而不是高亮处对应的内容。

图中高亮处属于“Local Storage”中的内容,通常被叫做“本地存储”数据。要删除本地存储中的数据需要使用localStorage对象,这个在大部分浏览器中都内置了,可以直接使用,使用方式如下:

// 新增一个

localStorage.setItem('testAddItem', 'New item in localStorage');

// 删除一个

localStorage.removeItem('testAddItem');

// 删除所有

localStorage.clear();

本地存储最长使用的方法就是以上三个,更多详情请了解localStorage对象。

希望是你想要的答案,如有疑问,可追问,望采纳!

如何使用javascript封装cookie实例详解

之前使用cookie,都是document.cookie的形式去操作,兼容性虽好,但是麻烦。个人又是个比较喜欢造轮子的人,所以针对cookie,封装了个工具类。很长时间以来,我都喜欢写代码,而不太喜欢文字总结,也不太喜欢写些零碎的东西,看来得改。

思路

(1)如何封装,封装成啥样

如何封装:就是使用原生的js封装成工具,那样到哪里都能能用。针对document.cookie封装是最好的方式,所有的操作都基于document.cookie。

封装成啥样:封装成能够以对象的形式存在,同时可以使用getter & setter方法的实行。

(2)封装哪些方法

get()、set(name, value, opts)、remove(name)、clear()、getCookies()等等,个人觉得封装这么多方法足矣使用cookie了。

行动

(1)了解cookie, cookie的实质是HTTP cookie,在客户端表现的对象时document.cookie.更多了解,可以看我下面的代码即注释

(2)上代码:这些代码应该都很直观,并且可以配合项目代码一起压缩。我觉得下面的开头的注释是重点。

/*

* HTTP Cookie:存储会话信息

* 名称和值传送时必须是经过RUL编码的

* cookie绑定在指定的域名下,非本域无法共享cookie,但是可以是在主站共享cookie给子站

* cookie有一些:比如IE6 & IE6- 限定在20个;IE7 50个;Opear 30个...所以一般会根据【必须】需求才设定cookie

* cookie的名称不分大小写;同时建议将cookie URL编码;路径是区分cookie在不同情况下传递的好方式;带安全标志cookie

* 在SSL情况下发送到服务器端,http则不会。建议针对cookie设置expires、domain、 path;每个cookie小于4KB

* */

//对cookie的封装,采取getter、setter方式

(function(global){

//获取cookie对象,以对象表示

function getCookiesObj(){

var cookies = {};

if(document.cookie){

var objs = document.cookie.split('; ');

for(var i in objs){

var index = objs[i].indexOf('='),

name = objs[i].substr(0, index),

value = objs[i].substr(index + 1, objs[i].length);

cookies[name] = value;

}

}

return cookies;

}

//设置cookie

function set(name, value, opts){

//opts maxAge, path, domain, secure

if(name && value){

var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

//可选参数

if(opts){

if(opts.maxAge){

cookie += '; max-age=' + opts.maxAge;

}

if(opts.path){

cookie += '; path=' + opts.path;

}

if(opts.domain){

cookie += '; domain=' + opts.domain;

}

if(opts.secure){

cookie += '; secure';

}

}

document.cookie = cookie;

return cookie;

}else{

return '';

}

}

//获取cookie

function get(name){

return decodeURIComponent(getCookiesObj()[name]) || null;

}

//清除某个cookie

function remove(name){

if(getCookiesObj()[name]){

document.cookie = name + '=; max-age=0';

}

}

//清除所有cookie

function clear(){

var cookies = getCookiesObj();

for(var key in cookies){

document.cookie = key + '=; max-age=0';

}

}

//获取所有cookies

function getCookies(name){

return getCookiesObj();

}

//解决冲突

function noConflict(name){

if(name && typeof name === 'string'){

if(name && window['cookie']){

window[name] = window['cookie'];

delete window['cookie'];

return window[name];

}

}else{

return window['cookie'];

delete window['cookie'];

}

}

global['cookie'] = {

'getCookies': getCookies,

'set': set,

'get': get,

'remove': remove,

'clear': clear,

'noConflict': noConflict

};

})(window); (3)example

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>cookie example</title>

</head>

<body>

<script type="text/javascript" src="cookie.js" ></script>

<script type="text/javascript">

console.log('----------cookie对象-------------');

console.log(cookie);

console.log('----------对象-------------');

console.log(cookie.getCookies());

console.log('----------设置cookie-------------');

console.log(cookie.set('name', 'wlh'));

console.log('----------设置cookie 123-------------');

console.log(cookie.set('name', 'wlh123'));

console.log('----------设置cookie age-------------');

console.log(cookie.set('age', 20));

console.log('----------获取cookie-------------');

console.log(cookie.get('name'));

console.log('----------获取所有-------------');

console.log(cookie.getCookies());

console.log('----------清除age-------------');

console.log(cookie.remove('age'));

console.log('----------获取所有-------------');

console.log(cookie.getCookies());

console.log('----------清除所有-------------');

console.log(cookie.clear());

console.log('----------获取所有-------------');

console.log(cookie.getCookies());

console.log('----------解决冲突-------------');

var $Cookie = cookie.noConflict(true /*a new name of cookie*/);

console.log($Cookie);

console.log('----------使用新的命名-------------');

console.log($Cookie.getCookies());

</script>

</body>

</html>

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

上一篇:

下一篇:

热门图文

  • 送周子华南归的作者 送周子华南归的作者是什么]

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻的全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者是什么

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

Top