使用JCOOKIES创建http cookie

jCookies,一个功能强大的操作http cookie的jquery插件,他能够让你存储任何数据类型如:字符串,数组,对象等。它通过JavaScript存储Cookies,然后通过服务器端代码如:C# 和PHP 读取数据。在我做的一个项目当中,需要检测当前国家的IP是否允许用户访问这个网站,如果不允许访问,会弹出框让你填写用户信息,如果你点击关闭按钮,在刷新页面的话,这个框就再也不会弹出了,这时候就要用到cookie来判断用户信息了,

下面我将介绍一下演示使用jCookies如何存储数据,同时在服务器端如何检索数据存储。

创建COOKIES

使用jCookies创建cookie你必须通过两个属性来创建: name value

$.jCookies({
name : 'Listening To',
value : { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}
});

你可以存储任何类型的数据,默认的cookies过期时间是27天,你可以通过下面的属性来设置过期时间:seconds, minutes, hours, days.,当你设置过期时间的时候你必须输入一个有效的数字,否则会被忽略哦

$.jCookies({ name : 'User', value : { username : 'Bob' , level : 5 }, minutes : 60 });

检索cookie

你可以使用get属性来检索cookie

var listening_to = $.jCookies({ get : 'Listening To' });
// 返回结果: { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true} var rutabaga = $.jCookies({ get : 'Rutabaga' }); // (cookie 没有被设置)
//返回结果: false

如果没有对应命名的cookie,或者cookie已经过期,或者当中包含错误的时候这时他都会返回false的状态,如果你想查看因为什么原因返回的错误,你可以设置一个error属性,代码如下

var rutabaga = $.jCookies({ get : 'Rutabaga', error : true });
/* response:
Error : {
arguments : undefined,
message : "Invalid base64 data",
stack : "—",
type : undefined
}
*/

删除COOKIES

你可以使用jcookies的erase属性来删除cookie

var erased_listening_to = $.jCookies({ erase : 'Listening To' });
// response: true var rutabaga = $.jCookies({ erase : 'Rutabaga' });
// response: false

如果这个cookie存在当他被删除的时候他会返回 true,如果cookie不存在他直接返回false;

服务器端操作COOKIES

服务器端处理jCookies创建的HTTP cookies非常简单,我们只需要使用Base64(base64_decode)解码cookie,然后再使用json对数据进行解码。

使用javascript设置cookie

$.jCookies({name:'user',value:{name:'brian',level:'awesome'}});
// response: true

使用PHP检索cookie

<?php print_r(json_decode(base64_decode($_COOKIE['user'], true))); ?>
/* response:
stdClass Object
(
[name] => brian
[level] => awesome
)
*/

使用c#检索cookie

Dictionary<string,object> user =
new JavaScriptSerializer().Deserialize<Dictionary<string,object>>
(Encoding.UTF8.GetString(
Convert.FromBase64String(Page.Request.Cookies["user"].Value)
)); Page.Response.Write("user : name = " + (string) user["name"]);

hide

上一篇:webpack+react


下一篇:AngularJs应用页面