Wie kann ich Informationen lokal in meiner Chrome-Erweiterung speichern?

78

Ich möchte, dass meine Chrome-Erweiterung einige Informationen speichert, und ich bin nicht sicher, wie ich den Code starten soll ... Ich brauche ihn, um Zeichenfolgen zu speichern. Beispiel: Der Benutzer gibt eine Zeichenfolge ein (in einem Textbereich über dem Popup) und diese Zeichenfolge wird im Popup angezeigt. Wenn der Benutzer es beendet und zurückgibt, möchte ich, dass die Zeichenfolge dieselbe bleibt. (Ich glaube, es muss gespeichert werden) Ich möchte es nicht auf meinem Server oder ähnlichem speichern, ich möchte, dass es im Cache des Benutzers oder so gespeichert wird.

javascript google-chrome google-chrome-extension Ariel
quelle
Wenn User-Exits das Popup schließen oder den Browser schließen?
Serg
Ist es wirklich wichtig? Es sollte funktionieren, wenn er den Browser schließt.
Ariel
Ok, dann ist localStorege die Antwort (andernfalls könnten Sie einfach Werte auf einer Hintergrundseite speichern)
Serg
Wenn der Inhalt, den Sie speichern möchten, aus einem Formular stammt (wie Optionen ), empfehle ich webext-options-sync . Es basiert auf dem chrome.storage.syncautomatischen Speichern und Wiederherstellen eines Formulars, kümmert sich aber auch darum.
Fregante

Antworten:

128

Sie können jetzt auch die storageAPI von Google Chrome nutzen , um dies zu tun. Im Gegensatz localStoragedazu ist dies auch über Inhaltsskripte möglich.

//  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" } ]
});

Weitere Informationen zur Funktionsweise dieser Spielereien finden Sie hier: https://developer.chrome.com/extensions/storage#type-StorageArea

Frühere Antwort:

Verwenden Sie localStorage . Google Chrome implementiert einige Funktionen von HTML5 und ist eine davon.

//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;

Sie sollten beachten, dass Sie nur über die Hintergrundseite (keine Inhaltsskripte) auf Ihren Speicher zugreifen können, daher müssen Sie dafür Messaging verwenden.

mattsven
quelle
4
Vielen Dank! Noch etwas - Wo wird es gespeichert? (Wo finde ich diese lokalen Speicherdateien im Grunde)
Ariel
Kein Problem. :) Hmm ... ich bin mir nicht sicher. Das ist etwas, wonach Sie fragen müssten, wenn es existiert. Übrigens, überprüfen Sie meine Antwort, wenn ich geholfen habe.
Mattsven
1
@BeauCielBleu Du hast recht, danke. Aktualisiert. Prüfen Sie?
Mattsven
@mattsven Ja. Und danke für die Erklärung der Synchronisation / des lokalen Unterschieds;)
BeauCielBleu
1
@mattsven Vielleicht ist das eine dumme Frage, aber wie bekomme ich den Artikel aus dem Rückruf? Ich versuche, eine Variable von dort zurückzugeben oder eine globale Variable festzulegen, und es funktioniert nicht.
Wahrheit
1

Es gibt jetzt eine bestimmte API. Überprüfen Sie diese hier: https://developer.chrome.com/extensions/storage

Beachten Sie, dass es nur auf Ihrer Hintergrundseite verfügbar ist und in einer isolierten Welt funktioniert (Sie greifen nicht auf die Werte zu, die im HTML5 localStorage der Website enthalten sind).

BeauCielBleu
quelle
7
Es ist eine sehr verwirrende Formulierung. Einer der Hauptvorteile ist, dass es in Inhaltsskripten ohne zusätzlichen Aufwand wie Messaging funktioniert.
Xan