js操作 Cookie 问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js操作 Cookie 问题相关的知识,希望对你有一定的参考价值。
<script>
document.cookie="username1=99"
alert(getCookie("username1"))
</script>
不好使 就是让他写入 然后读取
js 操作 cookies的
function GetCookieVal(offset)
//获得Cookie解码后的值
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
//---------------------------
function SetCookie(name, value)
//设定Cookie值
var expdate = new Date();
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
if(expires!=null) expdate.setTime(expdate.getTime() + ( expires * 1000 ));
document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires="+ expdate.toGMTString()))
+((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain))
+((secure == true) ? "; secure" : "");
//---------------------------------
function DelCookie(name)
//删除Cookie
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
//------------------------------------
function GetCookie(name)
//获得Cookie的原始值
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return GetCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
return null;
SetCookie("username1",99);
alert(GetCookie("username1"));
</script>本回答被提问者采纳
js cookie常见API 操作(学习整理)
文章目录
一、参考
二、JavaScript cookie
2.1 cookie 介绍
2.1.1 cookie 的作用
1、在JavaScript中可以利用cookie实现严格的跨页面全局变量
2、cookie是存于用户硬盘上的一个文件,但这个文件通常对应于一个域名
,当浏览器再次访问这个域名时,便可以使用这个cookie
3、cookie可以跨越一个域名下的多个网页,但是不能跨越多个域名使用
4、cookie的名或值中不能使用分号、逗号、等号以及空格,解决这个办法使用escape()函数
document.cookie="str="+escape("i = love; you,");
alert(escape("="));
alert(escape(","));
alert(escape(";"));
alert(escape(" "));
2.1.2 优点
1、保存用户的登陆状态
2、跟踪用户的行为(在网页上选择天气预报的城市)
3、定制页面(自己设定的网页风格——不过也可以通过server来解决)
备注:上面的方法除了第一种情况其余的都可以配合Server来解决
2.1.3 缺点
1、cookie牵涉到安全问题,如果禁用那么功能就要被“删除”(可以通过使用默认值来解决)
2、cookie是和浏览器相关的,即不同的浏览器之间保存的cookie是不能相互使用的
3、cookie这个功能可能会被“禁用”
2.2 cookie 的 CURD(增删查)
1、如何建立相应的硬盘文件,即把cookie保存到硬盘中?
var date = new Date();
var expireDays = 10;
date.setTime(date.getTime() + expireDays*24*3600*1000);
//这里需要使用expire这个key,然后就能保存cookie,相当于这是一个关键字
document.cookie = "userId=28;userName=huangbiao;expire="+date.toGMTString();
2、删除cookie
function deleteCookie(name){
var date = new Date();
//设置日期小于当前的日期
date.setTime(date.getTime()-10000);
document.cookie=name+"v;expire="+date.toGMTString();
}
- 添加cookie的值
function addCookie(name,value,expireHours){
if("" == name || null == name || undefined == name){
alert("name is null");
return "";
}
if("" == value || null == value || undefined == value){
alert("value is null");
return "";
}
var cookieString = name+"="escape(value);
//判断是否设置过期时间
if(expireHours>0){
var date = new Date();
date.setTime(date.getTime() + expireHours*3600*1000);
cookieString = cookieString+";expire="+date.toGMTString();
}
document.cookie=cookieString;
}
- 得到指定cookie的值
function getCookie(name){
var strCookie = document.cookie;
var arrCookie = strCookie.split(";");
for(var i = 0; i < arrCookie.length; i++){
var arr = arrCookie[i].split("=");
if(arr[0] == name)
return arr[1];
}
return "";
}
2.3 常见问题
2.3.1 指定可访问的cookie的路径?
例如在www.xxxx.com/html/a.html中所创建的cookie,可以被www.xxxx.com/html/b.html或www.xxx.com/html/some/c.html所访问,但不能被www.xxxx.com/d.html访问
//表示当前cookie仅能在abc目录下使用
document.cookie="userId=32;path=/abc";
//表示在整个网站下可以使用
document.cookie="userId32;path=/";
2.3.2 指定可访问的cookie的主机名?
例如:www.google.com和gmail.google.com就是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制
解决办法:
//domain这个也是特殊属性,指明主机的名称
document.cookie="name=huangbiao;domain=.google.com";
三、第三方js-cookie
3.1 安装
$ npm i js-cookie
3.2 引用库
- ES module 在浏览器中
<script type="module" src="/path/to/js.cookie.mjs"></script>
<script type="module">
import Cookies from '/path/to/js.cookie.mjs'
Cookies.set('foo', 'bar')
</script>
- ES Module 引入
import Cookies from 'js-cookie'
Cookies.set('foo', 'bar')
3.3 快速入门
Cookies.set('name', 'value', { path: '' })
Cookies.get('name') // => 'value'
Cookies.remove('name', { path: '' })
3.4 API(增删查)
- 写cookie
Cookies.set('name', 'value')
Cookies.set('name', 'value', { expires: 7 })
Cookies.set('name', 'value', { expires: 7, path: '' })
- 读取值
读具体的值
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
读所有的值
Cookies.get() // => { name: 'value' }
- 删除值
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!
- 命名空间冲突
// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies.noConflict()
Cookies2.set('name', 'value')
- 支持https
secure的值true或false,表示cookie传输是否需要安全协议(https)。
Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')
以上是关于js操作 Cookie 问题的主要内容,如果未能解决你的问题,请参考以下文章