How to store the dynamic values in local storage using java script?

Question

I have created a bus seat layout dynamically ....

and how to store the seat number in local storage ...

below is my html code

<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>

below is css

#holder{    
height:225px;    
width:365px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;   
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
 list-style: none outside none;
 position: absolute;   
}    
#place li:hover
{
background-color:yellow;      
} 
#place .seat{
background:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;   
}
#place .selectedSeat
{ 
background-image:url("booked_seat_img.gif");          
}
#place .selectingSeat
{ 
background-image:url("selected_seat_img.gif");        
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;    
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}

below is my js

$(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(','));
    })
});

How to storage seat number in local storage

how to storage the dynamic values in local storage..

I have created all seats dynamically using jquery and java script ...

Possible duplicate of [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Pedram, Dec 16 '17 at 06:58

score 3 · Accepted Answer · answered Dec 16 '17 at 07:10

3

In your code #place is ul, and you are store html to it.

when you get value by document.getElementById('place').value it returns undefined, so localStorage.setItem('SeatNum', SeatNo); will set undefined.

when you get value using localStorage.getItem('SeatNum') you will get undefined from it.

you will need to store selected seat value instead html

here I have pasted your code in jsbin you can debug it.

answered Dec 16 '17 at 07:10

programtreasures

4,250
1
10
29

how to do that one ? – Babu Dec 16 '17 at 07:29
Do you need to store all seat numbers to localstorage? – programtreasures Dec 16 '17 at 07:59
no only selected seat number to store in local storage – Babu Dec 16 '17 at 08:03
Check updated jsbin https://jsbin.com/ruzaqe/edit?html,js,console,output Check in console pane you will see already reserved and selecting seats from local storage – programtreasures Dec 16 '17 at 08:30
I have one more doubt how to print the selected seat numbers in dom?@programtreasures – Babu Dec 17 '17 at 06:21

How to store the dynamic values in local storage using java script?

1 Answers1