<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cookie操作測試</title>
<meta name="description" content="" />
<meta name="author" content="小J、小花" />
<script src="./lib/jquery-1.7.2.min.js"></script>
<script src="./lib/jquery.cookie.js"></script>
<style>
li{
list-style: none;
font-size: 14px;
}
</style>
<script>
//cookie是以key value存在瀏覽器上，
//每個cookie最大4k，
//以存文字存在瀏覽器中，
//每個瀏覽器所能使用最大數量不同，IE8更新後可支援到50
//因為cookie是以存文字保存資料，因此：
//若是複雜物件型態資料想存進cookie中，就必須將物件序列化成某種字串模式，而JSON就是一種不錯的選擇。
//此處以JSON為範例
$(document).ready(function(){
$('#SaveCookieBtn').click(function(){
var _user = $('#userInput').val();
var _tel = $('#telInput').val();
var _age = $('#ageInput').val();
//spec
//$.cookie(name[, value][, options]);
//example
//$.cookie(name , value , { path: cookiePath , expires: cookieExpires });
//cookie存活時間，若不設瀏覽器關掉就會自動刪除
//cookie路徑，若不設預設該頁面所在路徑
var date = new Date();
date.setTime(date.getTime() + (5 * 24 * 60 * 60 * 1000));
var cookieValue = {user:_user , tel:_tel , age:_age};
//將cookieValue轉為JSON字串
var JSON_cookieValue = JSON.stringify(cookieValue);
//alert(JSON_cookieValue);
//將cookie寫入瀏覽器
//這是不指定path 與 expires
//$.cookie("myCookie" , JSON_cookieValue );
//指定存活時間
$.cookie("myCookie" , JSON_cookieValue , {expires:date});
//這個指定時間與路徑,但不知為何清不掉cookie
//$.cookie("myCookie" , JSON_cookieValue , {expires:date , path:'/'});
});
$('#clearCookieBtn').click(function(){
if($.cookie("myCookie") == null){
return;
}else{
$.cookie("myCookie" , null);
}
});
$('#showCookieBtn').click(function(){
if($.cookie("myCookie") == null){
$('#report').html("cookie 不存在");
}else{
var JSON_cookie = $.cookie("myCookie");
$('#report').html(JSON_cookie);
}
});
});
</script>
</head>
<body>
<header><h1>Cookie操作測試</h1></header>
<div>
<ul>
<li>
<span>姓名</span>
<input type="text" id="userInput" maxlength="15" value="小花"/>
</li>
<li>
<span>電話</span>
<input type="text" id="telInput" maxlength="16" value="0933-123456">
</li>
<li>
<span>年齡</span>
<input type="text" id="ageInput" maxlength="4" value="33">
</li>
<li>
<input type="button" id="SaveCookieBtn" value="儲存Cookie"/>
<input type="button" id="clearCookieBtn" value="清除Cookie"/>
<input type="button" id="showCookieBtn" value="將cookie內容呈現"/>
</li>
<li>
<span>cookie 內容： </span><span id="report"></span>
</li>
</ul>
</div>
</body>
</html>
//設定cookie
$.cookie("cookieName", "Your_JSON_String_Data");
//設定存活時間為5天
$.cookie("cookieName", "Your_JSON_String_Data", { expires: 5 });
//設定cookie，存活5天 且cooke path為 /myweb
$.cookie("cookieName", "Your_JSON_String_Data", { path: '/myweb', expires: 5 });
//取得cookie
$.cookie("cookieName");
//刪除cookie
$.cookie("cookieName", null);
or
$.cookie("cookieName", { expires: -1 });
//判斷cookie
if($.cookie("cookieName") == null){
//沒有cookie
}else{
//cookie存在
}
沒有留言:
張貼留言