js设置cookie,读取cookie, 删除cookie,表单页跳转到其他页面,不清空表单的时候可以使用cookie保存数据
js设置cookie,读取cookie, 删除cookie,本地无效,需要用域名/ip访问才能设置
表单页跳转到其他页面,不清空表单的时候可以使用cookie保存数据
引用js.cookie.min.js
//设置cookie
Cookies.set('name', 'value', { expires: 7, path: '' });
Cookies.set('name', { foo: 'bar' });//json格式的数据
//读取cookie
Cookies.get('name');
Cookies.get();//全部cookie
//json格式的数据
Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON();
//删除cookie
Cookies.remove('name');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置cookie</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js.cookie.min.js"></script>
<style type="text/css">
body{
font-size:18px;
}
#cookieTips {
display: none;
position: fixed;
width: 100%;
min-height: 2em;
line-height: 2em;
bottom: 0;
left: 0;
right: 0;
font-size: 0.9em;
color: #fff;
background-color: rgba(20,20,20,0.9);
z-index: 9999;
}
.cookie-content {
width: 100%;
}
#cookieTips .cookie-txt {
width: 80%;
}
#cookie-button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
padding: 4px 20px;
color: #000;
border: 0;
font-size: 1em;
line-height: 1;
border-radius: 0;
cursor: pointer;
background-color: #fff;
}
</style>
</head>
<body>
<div id="cookieTips">
<div class="col-full cookie-content">
<div class="cookie-txt">
<div id="text-7" class="widget widget_text">
<div class="textwidget"><p>若您选择继续浏览本网站,即表示您同意我们的<a style="text-decoration: underline; color: #fff;" href="#">条款和细则</a>、<a style="text-decoration: underline; color: #fff;" href="#">隐私政策</a>及同意我们使用Cookies。</p>
</div>
</div>
</div>
<div id="cookie-button">OK</div>
</div>
</div>
<script type="text/javascript">
if(Cookies.get('the-cookie-name')!="mycookie"){
// console.log("不存在设置的cookie!");
$("#cookieTips").css("display","block");
}
$("#cookieTips").on("click","#cookie-button",function(){
//设置7天有效期
Cookies.set('the-cookie-name','mycookie', { expires: 7 });
$("#cookieTips").css("display","none");
});
</script>
</body>
</html>