CODEWITHSUNDEEP
javascript
Frederik Delaet
Frederik Delaet

Reputation: 21

Get multiple values with local storage

I'd like to retrieve the name and the date of created tasks. I managed to put the value taskMessage in local storage, but I don't know how to add taskName as well. This is the code I currently have :

$(document).ready(function () {

var i = 0;
for (i = 0; i < localStorage.length; i++) {
    var taskID = "task-" + i;

    $('.task-container').append("<li class='item-content' id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('.floating-button').on('click', function () {
    myApp.prompt('', 'Add Task', function (task) {
        if (task !== "") {
            myApp.prompt('', 'Choose time', function (time) {
                var d1 = new Date();
                d1.setHours(time, 0, 0, 0);
                var hour = d1.getHours();
                if (time > 0 && time < 25) {
                    var d2 = new Date();
                    var currenttime = d2.getHours();
                    if (time > currenttime) {
                        var taskID = "task-" + i;
                        var taskMessage = hour;
                        var taskName = task;
                        localStorage.setItem(taskID, taskMessage);
                        var newtask = '<li class="item-content ' + taskID + '"><div class="item-inner"><div class="item-title" >' + taskName + '</div><div class="item-after"> ' + taskMessage + ':00</div> </div></li>';
                        var taskitem = $('#' + taskID);
                        $('.task-container').append(newtask);
                    }
                    else {
                        myApp.addNotification({
                            message: 'Please choose a valide time period'
                        });
                    }
                }
                else {
                    myApp.addNotification({
                        message: 'Please choose a value between 1 and 24'
                    });
                }
            });
        }
        else {
            myApp.addNotification({
                message: 'Please enter a valid name'
            });
        }
    });
});
});

Upvotes: 2

Views: 30435

Answers (4)

bharath
bharath

Reputation: 81

First you should get the data into a variable

var getData = 
{
   "firstData":"data1",
   "secondData":"data2",
   "thirdData": "data3"
}

Then you can set the above data's in localStorage...

localStorage.setItem('dataKey', JSON.stringify(getData ));

Then get....

var val = localStorage.getItem('dataKey');

Enjoy!!!

Upvotes: 8

holi-java
holi-java

Reputation: 30696

localStorage saves item key&value as string,so you call setItem with an object/json object,you must serialize json to string by JSON.stringify() method.when you get value you need parse string as json object using JSON.parse() method.

Test

test(`can't retrieve json from localStorage if raw json data saved`, () => {
    localStorage.setItem('foo', {foo: 'bar'});

    expect(localStorage.getItem('foo')).toEqual('[object Object]');
});

test(`retrieve json value as string from localStorage`, () => {
    localStorage.setItem('foo', JSON.stringify({foo: 'bar'}));

    let json = JSON.parse(localStorage.getItem('foo'));

    expect(json.foo).toEqual('bar');
});

test(`key also be serialized`, () => {
    localStorage.setItem({foo: 'bar'}, 'value');

    expect(localStorage.getItem('[object Object]')).toEqual('value');
});

test('supports bracket access notation `[]`', () => {
    localStorage.setItem('foo', 'bar');


    expect(localStorage['foo']).toEqual('bar');
});

test('supports dot accessor notation `.`', () => {
    localStorage.setItem('foo', 'bar');


    expect(localStorage.foo).toEqual('bar');
});

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

If you want to store two different values in localStorage then you can do somrthing like this :

  • setItem in localStorage two times with different keys.

    localStorage.setItem("message", taskMessage);
localStorage.setItem("name", taskName);

  • Store both the values in an object.

    var obj = {
    "message": taskMessage,
    "name": taskName 
}

var val = localStorage.setItem("task", obj);

typeof val: string
Value of val: [object Object]
setItem method convert the input to a string before storing it.

Try this :

// Put the object into storage
localStorage.setItem('task', JSON.stringify(obj));

// Retrieve the object from storage
var val = localStorage.getItem('obj');

console.log('retrievedValue: ', JSON.parse(val));

Upvotes: 2

Suhail Akhtar
Suhail Akhtar

Reputation: 2043

You can easily store values in localstorage using following example.

//Save the values to Localstorage
localStorage.setItem('first','firstvalue');
localStorage.setItem('second','secondvalue');

//Retrieve the values from localstorage
localStorage.getItem('first')
//"firstvalue"
localStorage.getItem('second')
//"secondvalue"

Upvotes: 0

Related Questions