0

我对这个localStorage对象有点困惑。 localStorage是一个对象，这显然意味着我们可以像普通对象一样创建方法、创建属性等。

我试图弄清楚如何在里面创建一个方法localStorage。这是我目前拥有的：

localStorage = {
firstname: function(){
        //get the firsname from the input and set it as the localstorage firsname
        $("#sublog").bind("click", function(){
        $("input[name='fName']").val();
        });
    },
    lastname: function(){
        //get the lastname from the input and set it as the localStorage lastname
        $("#sublog").bind("click", function(){
        $("input[name='lName']").val();
        });
    }
};

我的 html 看起来像这样：

<div id="log">
    <form>
        <input type="text" id="fName" name="fName" placeholder="FirstName" />
        <input type="text" id="lName" name="lName" placeholder="LastName" />
        <input type="submit" id="sublog" name="login" value="Login" />
    </form>

为了清楚起见，我只想将客户的姓名存储到客户插入他的名字localStorage.firstname和localStorage.lastname姓氏以保存它们的时间。

4

4 回答 4

4

LocalStorage旨在将数据存储在客户端，而不是方法过载。你可以这样使用它：

localStorage.foo = "bar";
console.log(localStorage.foo);
>> bar

如果需要存储对象，则必须将其序列化为字符串。

myobject = {
    foo: 'bar'
}
localStorage.myobject = JSON.stringify(myobject);

并以这种方式取回

myobject = JSON.parse(localStorage.myobject);

无论如何，函数不能（也不应该）以这种方式存储。

于 2013-06-27T13:31:50.003 回答
1

它不会以这种方式工作。您必须在localStorage集合中为您的对象分配一个键，并且它不能是一个函数，只有具有值的对象。您必须JSON.stringify解析对象，然后将其插入 localStorage。

有关更多信息，请查看这篇文章。

要将对象设置为localStorage，

//set that to localStorage
localStorage["optArray"] = JSON.stringify(optArray);

要从中获取值localStorage，

var store = [undefined, null].indexOf(localStorage["optArray"]) != -1 ? [] : JSON.parse(localStorage["optArray"]);

在您的情况下，您的点击事件必须将其插入localStorage：

 $("#sublog").bind("click", function () {
     //set your names in an object
     var name = {
         "first": $("input[name='fName']").val(),
         "last": $("input[name='lName']").val()
     }
     //parse it as a string and store it in localStorage
     localStorage["name"] = JSON.stringify(name);
     alert("Logged in!");
     //now refresh the page - you must see those values in the text box.
 });

然后，当页面刷新时，您必须从中获取值localStorage并将其设置为文本框。

//page refresh
//check if value exists in localStorage
 if ([undefined, null].indexOf(localStorage["name"]) == -1) {
     //exists
     var name = JSON.parse(localStorage["name"]);
     $("#fName").val(name["first"]);
     $("#lName").val(name["last"]);
 }

演示：http: //jsfiddle.net/hungerpain/hgAHs/

于 2013-06-27T13:17:39.670 回答
1

你为什么要在 localStorage 中存储函数？

您通过键值对将数据存储在 localStorage 中。例如

localStorage.setItem('key','value');

其中键和值是字符串。您可以使用 by using 检索您的数据

localStorage.getItem('key');

或者，您可以使用

localStorage.key = 'something'

和

var something = localStorage.key;
于 2013-06-27T13:25:42.277 回答
1

不幸的是，它不是那样工作的。该localStorage对象不是您可以修改以保存值的任意对象——相反，您必须使用getItemorsetItem方法来存储数据。

例如，这是您的代码的编辑版本，可以执行您想要的操作：

function bind_handlers () {
    $("#sublog").bind("click", function(){
        var firstname = $("input[name='fName']").val();
        var lastname = $("input[name='lName']").val();

        localStorage.setItem('firstname', firstname);
        localstorage.setItem('lastname', lastname);
    });
}

稍后要检索这些值，只需调用localStorage.getItem('firstname')or localStorage.getItem('lastname')。

如果要保存类似的数据结构{firstname : value, lastname : othervalue}，首先必须将其转换为 JSON。一个例子：

function bind_handlers () {
    $("#sublog").bind("click", function(){
        var my_data = {
            firstname: $("input[name='fName']").val(),
            lastname: $("input[name='lName']").val()
        }

        localStorage.setItem('keyname', JSON.stringify(my_data));
    });
}

对于检索：

var my_data = JSON.parse(localStorage.getItem('keyname'));
于 2013-06-27T13:29:40.193 回答