Question

我对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。

Answer 1

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

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

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

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

以这种方式取回

myobject = JSON.parse(localStorage.myobject);

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

Answer 2

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

有关详细信息，请查看this article。

将对象设置为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/

Answer 3

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

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

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

其中键和值为字符串。您可以使用

来检索数据

localStorage.getItem('key');

或者你可以使用

localStorage.key = 'something'

和

var something = localStorage.key;

Answer 4

不幸的是，它不会那样工作。 localStorage对象不是可以修改以保存值的任意对象 - 而是必须使用getItem或setItem方法来存储数据。

例如，以下是您所需代码的编辑版本：

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

如何创建localStorage方法

4 个答案: