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


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.