크롬 확장자를 사용하여 localstorage에 액세스하는 방법

Question

크롬 확장 프로그램에서 작업 중이며 로컬 저장소에 정보를 성공적으로 저장할 수 있지만 로컬 저장소에 일단 정보가 실제로 액세스됩니다. 내가 반환하지 않은 것은 NULL이라고 말합니다.

두 파일 : options.html 및 content.js가 있습니다. options.html은 사용자가 로컬 스토리지에 저장할 정보를 입력하는 곳이며 content.js는 사용할 정보에 액세스합니다.

options.html

$(function() { 
    // Insert new buttons (you'd probably not ACTUALLY use buttons, instead saving on blurs or every x seconds) 
    $("#save_buttons").after("<input type='submit' value='Save Form' id='saveData'>").after("<input type='submit' value='Clear Saved Data' id='clearData'>"); 
    $("#saveData").click(function(e) { 
     // Don't actually submit form 
     e.preventDefault(); 

     // Bit of generic data to test if saved data exists on page load 
     localStorage.setItem("flag", "set"); 

     // serializeArray is awesome and powerful 
     var data = $("#hanes").serializeArray(); 

     // iterate over results 
     $.each(data, function(i, obj) { 
      // HTML5 magic!! 
      localStorage.setItem(obj.name, obj.value); 
     }); 
    }); 

    // Test if there is already saved data 
    if (localStorage.getItem("flag") == "set") { 
     // Tell the user 
     $("header").before("<p id='message'>This form has saved data!</p>"); 

     // Same iteration stuff as before 
     var data = $("#hanes").serializeArray(); 

     // Only the only way we can select is by the name attribute, but jQuery is down with that. 
     $.each(data, function(i, obj) { 
      $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name)); 
     }); 
    } 

    // Provide mechanism to remove data. You'd probably actually remove it not just kill the flag 
    $("#clearData").click(function(e) { 
     e.preventDefault(); 
     localStorage.setItem("flag", ""); 
    }); 
}); 


<form id="hanes" name="hanes"> 
First name: <input type="text" name="firstname" id="firstname" /><br /> 
Last name: <input type="text" name="lastname" /><br /> 
Address: <input type="text" name="address" /><br /> 
City: <input type="text" name="city" /><br /> 
</form> 

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if (request.method == "firstname") 
     sendResponse({status: localStorage['firstname']}); 
    else 
     sendResponse({}); 
}); 

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if (request.method == "lastname") 
     sendResponse({status: localStorage['lastname']}); 
    else 
     sendResponse({}); 
}); 

content.js

chrome.extension.sendRequest({method: "firstname"}, function(response) { 
    alert(response.status); 
}); 

chrome.extension.sendRequest({method: "lastname"}, function(response) { 
    alert(response.status); 
}); 

Answer 1

콘텐츠 스크립트는 확장 영역 (Chrome extension code vs Content scripts vs Injected scripts) 외부의 자체 세계에서도 실행됩니다. 콘텐츠 스크립트는 확장 프로그램의 localStorage에 액세스 할 수 없습니다.
메시지 전달 (http://code.google.com/chrome/extensions/messaging.html)을 사용하여 배경 페이지와 통신해야하거나 배경 페이지를 사용하지 않으려는 경우 iFrame 트릭 (Options-enabled content-script Chrome extension without background page?)을 사용할 수 있습니다.

Answer 2

사용 대신

var fname = window.localStorage.getItem('firstname');