如何js获取cookie并在html上显示用户名

第一种：用原生的documentcookie读取cookie

//读取cookies

function getCookie(name)

{

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

if(arr=documentcookiematch(reg))

return unescape(arr[2]);

else

return null;

}

使用示例：

getCookie("name")

第二种是用 jquerycookie js *** 作cookie,读取cookie如下：

$cookie('name')

avaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie

假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？

首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为：

复制代码代码如下:

documentcookie="name="+username;

JS读取cookie:

假设cookie中存储的内容为：name=jack;password=123

则在B页面中获取变量username的值的JS代码如下：

var username=documentcookiesplit(";")[0]split("=")[1];

//JS *** 作cookies方法!

//写cookies

function setCookie(name,value)

{

var Days = 30;

var exp = new Date();

expsetTime(expgetTime() + Days2460601000);

documentcookie = name + "="+ escape (value) + ";expires=" + exptoGMTString();

}

读取cookies

function getCookie(name)

{

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

if(arr=documentcookiematch(reg))

return unescape(arr[2]);

else

return null;

}

删除cookies

function delCookie(name)

{

var exp = new Date();

expsetTime(expgetTime() - 1);

var cval=getCookie(name);

if(cval!=null)

documentcookie= name + "="+cval+";expires="+exptoGMTString();

}

//使用示例

setCookie("name","hayden");

alert(getCookie("name"));

//如果需要设定自定义过期时间

//那么把上面的setCookie　函数换成下面两个函数就ok;

//程序代码

function setCookie(name,value,time)

{

var strsec = getsec(time);

var exp = new Date();

expsetTime(expgetTime() + strsec1);

documentcookie = name + "="+ escape (value) + ";expires=" + exptoGMTString();

}

function getsec(str)

{

alert(str);

var str1=strsubstring(1,strlength)1;

var str2=strsubstring(0,1);

if (str2=="s")

{

return str11000;

}

else if (str2=="h")

{

return str160601000;

}

else if (str2=="d")

{

return str12460601000;

}

}

//这是有设定过期时间的使用示例：

//s20是代表20秒

//h是指小时，如12小时则是：h12

//d是天数，30天则：d30

setCookie("name","hayden","s20");

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

一、从写 cookie 说起。

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

var expiresDate = the_datetoGMTString();

documentcookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;

第一句是日期对象；

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

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

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

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

二、取 cookie 是比较简单的。

function GetCSS()

{

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

if (cookieStr == "")

{

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

}

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

var varName = "userDefineCSS";

var startPos = -1;

var endPos = -1;

for (var i=0; i<cookieValuelength; i++)

{

startPos = cookieValue[i]indexOf(varName);

if (startPos != 0)

{

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

}

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

endPos = cookieValue[i]length;

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

return css;

}

return "main1";

}

正常情况下，浏览器禁止跨域获取cookie

一般通过sso服务可以实现取得跨域cookie，思路如下：

域A页面访问位于域A的服务器，对权限进行验证

域A服务器于域B服务器通信，记录一个唯一的加密串用作身份验证域（并将cookie信息发送给域B服务器）

域A服务器返回302跳转，跳转到域B下，并将加密串作为url的一部分

页面由域A跳转到域B，域B服务器通过加密串获取到事先从域A服务器上得到的cookie信息，并在响应头中添加set-cookie字段设置cookie

以上就是关于如何js获取cookie并在html上显示用户名全部的内容，包括:如何js获取cookie并在html上显示用户名、js怎么设置cookie得到cookie删除cookie、JS *** 作 cookies 的方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！