[英]jQuery cookie: How can I save the color selection of the user for the next visit?
[英]jQuery: How can I save a selection in a cookie?
我創建了橫幅更改器,允許用戶根據需要更改橫幅,但是我希望選擇內容保存在Cookie中。 我想創建自己的代碼。 您可以在此處查看代碼的概述: http : //thoughtscenter.com/test/
當前,如果我在打開橫幅選擇器時選擇一個圖像,那么一切正常,但是當我刷新頁面時,該圖像消失了,我必須再次選擇它以放置該圖像:刷新后http://prntscr.com/7mkzi2頁面: http : //prntscr.com/7mkzn4
我的HTML代碼(橫幅更改):
<div id="banner-picker">
<ul>
<li>
<span id="banner-1" style="background-image: url('banner-1.jpg');"></span>
</li>
<li>
<span id="banner-2" style="background-image: url('banner-2.jpg');"></span>
</li>
<li>
<span id="banner-3" style="background-image: url('banner-3.jpg');"></span>
</li>
<li>
<span id="banner-4" style="background-image: url('banner-4.jpg');"></span>
</li>
</ul>
</div>
標語更改器的JavaScript代碼:
$(function()
{
$("#banner-picker-toggle-button").click(function(e)
{
$("#banner-picker").slideToggle();
});
$("#banner-picker span").click(function(e)
{
var banner_id = $(this).attr("id");
$("#header").removeClass().addClass(banner_id);
});
});
CSS:
#banner-picker
{
border-bottom: 1px solid #CCCCCC;
display: none;
overflow: hidden;
margin: 0 -20px 20px -20px;
padding: 0 20px 20px 20px;
}
#banner-picker li
{
float: left;
width: 25%;
}
#banner-picker span
{
height: 130px;
display: block;
margin-right: 20px;
border-radius: 3px;
box-shadow: inset 0px 1px 10px;
}
#banner-picker li:last-child span
{
margin-right: 0;
}
#header.banner-1
{
background-image: url("banner-1.jpg");
}
#header.banner-2
{
background-image: url("banner-2.jpg");
}
#header.banner-3
{
background-image: url("banner-3.jpg");
}
#header.banner-4
{
background-image: url("banner-4.jpg");
}
想法是保存用戶通過cookie為下次訪問或在刷新頁面時選擇的內容,橫幅保持不變。
只需在此代碼中看到即可使用。
$(function()
{
var bannervalue= localStorage.getItem('banner'); // get banner id from storage
if(bannervalue==null)
{
}
else
{
$("#header").removeClass().addClass(bannervalue);
}
$("#banner-picker-toggle-button").click(function(e)
{
$("#banner-picker").slideToggle();
});
$("#banner-picker span").click(function(e)
{
var banner_id = $(this).attr("id");
$("#header").removeClass().addClass(banner_id);
localStorage.setItem('banner', banner_id ); // set banner id from storage
});
});
您可以嘗試使用jQuery Cookies插件,因為localStorage在ie9或更低版本中不起作用:
添加此js文件<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
並更改您的代碼:-
$("#banner-picker span").click(function(e)
{
var banner_id = $(this).attr("id");
$.cookie('banner',banner_id);
$("#header").removeClass().addClass(banner_id);
});
並添加以下代碼:
$(function(){
if(typeof $.cookie('banner')!='undefined')
{
$("#header").addClass($.cookie('banner'));
}
});
更新代碼:=
$(function () {
if (typeof $.cookie('banner') != 'undefined') {
$("#header").addClass($.cookie('banner'));
}
$("#banner-picker-toggle-button").click(function (e) {
$("#banner-picker").slideToggle();
});
$("#banner-picker span").click(function (e) {
var banner_id = $(this).attr("id");
$.cookie('banner', banner_id);
$("#header").removeClass().addClass(banner_id);
});
});
使用document.cookie="key:value"
設置cookie,其中鍵(變量名)是key,變量的值是value。
您可以使用它來獲取Cookie:
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
其中cname是cookie的名稱。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.