gpt4 book ai didi

javascript - 具有持久数据(数据存储)的 Chrome 扩展程序

转载 作者:行者123 更新时间:2023-11-30 16:14:06 25 4
gpt4 key购买 nike

我目前正在尝试运行我的第一个 chrome 扩展程序。这是一个非常简单的应用程序,用于学习一些 Javascript 和管理一些数据。我已经设法让我的简单扩展程序运行,但问题是如果我关闭扩展程序或单击页面上的其他地方,扩展程序中的数据就会丢失。所以我想每次你点击图标时扩展都会重新启动。 但我希望数据保留在我的扩展程序中,即使我切换到另一个页面或关闭扩展程序的 HTML 窗口。

我如何管理在我的扩展运行时存储的数据?

这是我的应用程序的代码。此时按钮只是将 5 添加到 stake 元素以查看他的值是否将被存储。

list .json

{
"manifest_version": 2,

"name": "Betting Extension",
"description": "This extension will analyze your account history",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}

popup.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tipico Analyzer</title>
<script src="popup.js"></script>
<link rel="stylesheet" href="Style.css">
</head>

<body style="width: 100px">
<p>stake: <span id="stake">0</span>€</p>
<p>profit: <span id="profit">0</span> €</p>
<p>winning: <span id="winning">0</span> €</p>
<button id="addPage">Add page</button>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function(){

var checkPageButton = document.getElementById('addPage');
checkPageButton.addEventListener('click', function(){

d = document;
var stake = parseFloat(d.getElementById('stake').innerHTML);


document.getElementById('stake').innerHTML = stake + 5;

}, false);


}, false);

最佳答案

在扩展程序运行时,可以通过三种方式存储数据。

  1. background page中设置一个变量: 通过在 manifest.json 中设置 "persistent": true,后台页面将在您的扩展运行时运行。
  2. 使用 chrome.storage :您可以使用此 api 来存储、检索和跟踪对数据的更改。 chrome.storage 中的数据即使在重启后仍然可用,但如果您的扩展程序被卸载,这些数据将会丢失。

    chrome.storage.local.get([key], function (result) {
    var value = result[key];
    });
    chrome.storage.local.set({key: val});
  3. 使用 localStorage

    var value = localStorage.getItem(key);
    localStorage.setItem(key, value);

关于javascript - 具有持久数据(数据存储)的 Chrome 扩展程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35791756/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com