localStorage 메서드를 만드는 방법

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.getItem('key'); 

를 사용하여 사용하여 데이터를 검색 할 수 있습니다. 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')); 

Answer 2

이렇게하면 작동하지 않습니다. 개체의 localStorage 컬렉션에 키를 할당해야합니다 (). 기능을 수행 할 수 없습니다., 값이있는 개체 만 허용됩니다. 객체를 파싱 한 다음 localStorage에 삽입하려면 JSON.stringify을 사용해야합니다.

자세한 내용은 this article을 참조하십시오. 상황에

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

이 localStorage에서 값을 얻으려면

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.setItem('key','value'); 

. 당신 또는 당신이 불행하게도, 그것은 그런 식으로 작동하지 않습니다

localStorage.key = 'something' 

및

var something = localStorage.key; 

Answer 4

LocalStorage는 방법과 과부하가 아니라, 클라이언트 측에 데이터를 저장하기위한 것입니다. 이 방법으로 사용할 수 있습니다 :

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

개체를 저장해야하는 경우 문자열로 직렬화해야합니다.

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

그리고 어쨌든이 방법

myobject = JSON.parse(localStorage.myobject); 

그것을 다시 얻을이 기능은 (그리고 안) 그런 식으로 저장할 수 없습니다.