Question

我想检索已创建任务的名称和日期。我设法将值taskMessage放在本地存储中，但我不知道如何添加taskName。这是我目前的代码：

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

Answer 1

如果您想在localStorage中存储两个不同的值，那么您可以像这样：

进行somrthing

使用不同的密钥在localStorage中进行两次setItem。

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

将值存储在对象中。

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

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

typeof val：字符串
val的值：[object Object]
setItem方法在存储之前将input转换为string。

试试这个：

// 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));

Answer 2

首先，您应该将数据转换为变量

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

然后您可以在localStorage中设置上述数据......

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

然后得到......

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

享受!!!

Answer 3

localStorage将项目键和值保存为string，因此您使用object / json对象调用setItem，必须通过JSON.stringify()方法将json序列化为字符串。当您获得价值时需要使用JSON.parse()方法将字符串解析为json对象。

测试

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

Answer 4

您可以使用以下示例轻松地将值存储在localstorage中。

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

使用本地存储获取多个值

4 个答案:

测试