Javascript 如何使用java脚本在本地存储中存储动态值？
我已经动态创建了一个公交车座椅布局 以及如何在本地存储器中存储座位号 下面是我的html代码Javascript 如何使用java脚本在本地存储中存储动态值？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经动态创建了一个公交车座椅布局 以及如何在本地存储器中存储座位号 下面是我的html代码 <div> <h2> Choose seats by clicking the corresponding seat in the layout below:</h2> <div id="holder"> <ul id="place">
<div>
<h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
var SeatNo = document.getElementById('place').value;
localStorage.setItem('SeatNum', SeatNo);
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
$（函数（）{
变量设置={
行：6，
科尔斯：10，
rowCssPrefix:“行-”，
colCssPrefix:'col-'，
西雅图：35，
座位号：35，
座位：'座位'，
SelectedSeatCS:“selectedSeat”，
selectingSeatCss:“selectingSeat”
};
var init=函数（reservedSeat）{
var str=[]，seatNo，className；
对于（i=0；i”+
“+seatNo+”+
“”）；
}
}
$（'#place'）.html（str.join（''）；
var SeatNo=document.getElementById（'place'）.value；
setItem（'SeatNum'，SeatNo）；
};
//案例一：从一开始就展示
//init（）；
//案例二：如果已经预订
var bookedSeats=[5,10,25]；
初始（预订座位）；
$（'.+settings.seatCss）。单击（函数（）{
if（$（this）.hasClass（settings.selectedseatcs））{
警报（“此座位已预订”）；
}
否则{
$（this）.toggleClass（settings.selectingSeatCss）；
}
});
$（'#btnShow'）。单击（函数（）{
var-str=[]；
$.each（$（'#place li.'+settings.selectedSeatCss+'a，#place li.'+settings.selectingSeatCss+'a'），函数（索引，值）{
str.push（$（this.attr（'title'））；
});
警报（str.join（'，'）；
})
$（'#btnshownshow'）。单击（函数（）{
var str=[]，项目；
$.each（$（'#place li.'+settings.selectingSeatCss+'a'），函数（索引，值）{
item=$（this.attr（'title'）；
str.push（项目）；
});
警报（str.join（'，'）；
})
});
#placedocument.getElementById（'place'）.value获取值时，它返回undefined
，因此localStorage.setItem（'SeatNum'，SeatNo）将设置未定义的
当您使用localStorage.getItem（'SeatNum'）
获取值时，您将从中获取undefined
您将需要存储选定的座位值，而不是html
我在这里粘贴了你的代码，你可以调试它。在你的代码中#place
是ul，你可以将html存储到其中
当您通过document.getElementById（'place'）.value获取值时，它返回undefined
，因此localStorage.setItem（'SeatNum'，SeatNo）将设置未定义的
当您使用localStorage.getItem（'SeatNum'）
获取值时，您将从中获取undefined
您将需要存储选定的座位值，而不是html
这里我已经粘贴了你的代码，你可以调试它。可能是你的重复alerady编写的代码，其中它不工作，但在本地存储中没有显示值。你可以调试以找到它不工作的地方。可能是你的重复alerady编写的代码，如果它不工作，但在本地存储中不显示值，您可以调试以找到它不工作的位置。如何执行该操作？是否需要将所有座位号存储到本地存储？不只存储在本地存储检查更新的jsbin签入控制台窗格中，您将看到已保留并从本地存储中选择座位I还有一个疑问是如何在dom中打印选定的座位号？@programmemearchow来执行此操作？是否需要将所有座位号存储到localstorage？不需要仅将选定的座位号存储在local storageCheck updated jsbin Check in console窗格中，您将看到已预订并从local Storages中选择座位我还有一个疑问如何在dom中打印所选的座位号？@programmarchears
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
var SeatNo = document.getElementById('place').value;
localStorage.setItem('SeatNum', SeatNo);
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});