크롬 확장 프로그램에 정보를 로컬로 저장하려면 어떻게해야합니까?


81

크롬 확장 프로그램이 일부 정보를 저장하고 싶은데 코드를 시작하는 방법을 잘 모르겠습니다. 문자열을 저장하려면이 프로그램이 필요합니다. 예를 들어-사용자가 문자열 (팝업 위의 텍스트 영역)을 입력하면이 문자열이 팝업에 표시됩니다. 사용자가 종료하고 반환하면 문자열이 동일하게 유지되기를 원합니다. (저는 그것을 저장해야한다고 믿습니다) 저는 그것을 제 서버 나 그와 비슷한 것에 저장하고 싶지 않습니다. 사용자 캐시 등에 저장하고 싶습니다.


사용자가 종료하면 해당 팝업을 닫거나 브라우저를 닫는다는 의미입니까?
serg

정말 중요합니까? 브라우저를 닫으면 작동합니다.
Ariel

좋아, 그러면 localStorege가 답입니다 (그렇지 않으면 배경 페이지에 값을 저장할 수 있습니다)
serg

저장하려는 콘텐츠가 options 와 같은 양식에서 나온 경우 webext-options-sync를 제안 합니다 . 양식을 기반으로 chrome.storage.sync하지만 자동 저장 및 자동 복원도 처리합니다.
fregante

답변:


130

이제 Google Chrome의 storageAPI를 활용 하여이 작업도 수행 할 수 있습니다. 와 달리 localStorage콘텐츠 스크립트에서도 액세스 할 수 있습니다.

//  Somewhere in your manifest...

{
    "permissions": [
        "storage"
    ]
}

//  Usage:

//  PERSISTENT Storage - Globally
//  Save data to storage across their browsers...

chrome.storage.sync.set({ "yourBody": "myBody" }, function(){
    //  A data saved callback omg so fancy
});

chrome.storage.sync.get(/* String or Array */["yourBody"], function(items){
    //  items = [ { "yourBody": "myBody" } ]
});

//  LOCAL Storage

// Save data to storage locally, in just this browser...

chrome.storage.local.set({ "phasersTo": "awesome" }, function(){
    //  Data's been saved boys and girls, go on home
});

chrome.storage.local.get(/* String or Array */["phasersTo"], function(items){
    //  items = [ { "phasersTo": "awesome" } ]
});

이러한 헛소리가 작동하는 방식에 대한 자세한 내용은 https://developer.chrome.com/extensions/storage#type-StorageArea를 참조하세요.

이전 답변 :

localStorage를 사용하십시오 . Google 크롬은 HTML5의 일부 기능을 구현하며 그중 하나입니다.

//Pull text from user inputbox
var data = document.getElementById("this_input").value;
//Save it to the localStorage variable which will always remember what you store in it
localStorage["inputText"] = data; 

백그라운드 페이지 (컨텐츠 스크립트 없음)에서만 스토리지에 액세스 할 수 있으므로이를 위해 메시징을 사용해야합니다.


4
감사! 한 가지 더-어디에 저장됩니까? (기본적으로이 localstorage 파일은 어디에서 찾을 수 있습니까?)
Ariel

문제 없어요. :) 흠 ... 잘 모르겠습니다. 그것이 존재한다면 주위에 물어봐야 할 것입니다. BTW, 내가 도운 경우 내 대답을 확인하십시오.
mattsven 2011 년

1
@BeauCielBleu 당신이 맞아요, 감사합니다. 업데이트되었습니다. 확인해 봐?
mattsven 2014-06-18

@mattsven 네. 그리고 동기화 / 지역의 차이를 설명 주셔서 감사합니다)
BeauCielBleu

1
@mattsven 어쩌면 이것은 어리석은 질문이지만 get 콜백에서 항목을 어떻게 가져 옵니까? 거기에서 변수를 반환하거나 전역 변수를 설정하려고하는데 작동하지 않습니다.
Truth

2

이제 특정 API가 있습니다. https://developer.chrome.com/extensions/storage 에서 확인하십시오.

백그라운드 페이지에서만 사용할 수 있으며 격리 된 세계에서 작동합니다 (웹 사이트의 HTML5 localStorage에 포함 된 값에 액세스하지 않음).


7
그것은 매우 혼란스러운 공식입니다. 주요 장점 중 하나는 메시징과 같은 추가 노력없이 콘텐츠 스크립트에서 작동한다는 것입니다.
Xan 2014-06-23
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.