Google chrome extension Chrome扩展保留html数据

我有一个扩展，它有一个popup.html，其中包含一个大的jstree。我想做的是：在浏览器窗口打开后，用户第一次单击弹出窗口时，将获取用于填充jstree的数据。随后单击弹出窗口将保留生成的html，因此不再需要生成树

换句话说，我只想生成一次jstree，并让弹出窗口将其html内容保存在内存中。这可行吗

下面是popup.js代码：

$(document).ready(function() {
    var backgroundPage = chrome.extension.getBackgroundPage();

    function logIt(text) {
        backgroundPage.console.log(text);
    }

    function buildUI(feedData) {
        $('#jstree').jstree({
            'core': {
                'animation': 0
            },

            'json_data': feedData,

            'themes': {
                'theme': 'classic',
                'dots': false,
                'icons': true
            },

            'types': {
                'valid_children': [ 'folder' ],
                'types': {
                    'folder': {
                        'valid_children': [ 'file' ],
                        'max_depth': 1
                    },
                    'file' : {
                        'valid_children': [ 'none' ],
                        'icon': { 'image': 'images/file.png' }
                    }
                }
            },

            'plugins': [
                'json_data',
                'themes',
                'sort',
                'types',
                'search'
            ]
        })
        .on('click', '.jstree-leaf', function() {
            logIt($(this).text());
        });
    }


    chrome.extension.sendRequest({'action': 'fetchFeed'}, function(response) {
        var output = JSON.parse(response);
        buildUI(output.data);
    });
});

---

window.localstrorage

可在

popup.html

中找到。因此，您可以将数据存储在localStorage中。但每次执行保存/检索操作时，都必须序列化/反序列化。除非您的jstree是巨大的（提示：您可以使用

eval

自由地进行反序列化，除非您需要来自第三方源的数据）

您还可以使用

indexedDB

，这样可以避免序列化/反序列化开销

更新 我记得有一个用于chrome扩展的存储api

chrome.storage

chrome

对象在

background.html

和

popup.html

中都可用。它的优点是

• 简单的API
• 它不需要您反序列化数据以进行存储
• 它是异步的。所以UI在检索时不会阻塞。但是在这种情况下，增益是不相关的，因为它位于

  popup.html

  的上下文中，如果您尝试导航离开，它无论如何都会关闭，因此它与阻止UI相同
• 您可以使用google sync同步数据，这样用户就可以访问使用您的扩展的多个chrome/chrome实例中的数据。这是最大的一个

另外，如果要使用

chrome.storage

api，您需要

storage

许可

更新

---

请看我的请求。我已经实现了api

是的，这是可行的，您可以使用chrome扩展提供的存储。相关代码将进入正在侦听您的

sendRequest

的侦听器。您能详细说明一下吗？我可以存储用于构建jsTree对象的JS对象。jsTree从JS对象构建HTML。这是需要几秒钟的部分。每次单击弹出窗口时，都会从后台页面获取对象，我必须等待1-2秒才能看到我的jsTree。我想要的是将生成的HTML保存在popup.HTML中，以便它立即显示。：）如果你有一个例子，我会很感激。你有一个例子，我可以看到吗？我会实际存储什么？我希望保留DOM结构，以便下次打开弹出窗口时，jsTree不必重建树。也许我可以存储jsTree对象本身？您可以选择存储JSON对象，然后构建树，也可以选择存储生成的html。我没有一个有效的示例，因为我有一段时间没有编写chrome扩展。如果你想让我帮你编写代码，你可以设置一个最小的chrome扩展，其中包含你想在上面做的基本内容，我将为你完成项目并编写存储代码。告诉我如何与你联系，我将通过电子邮件向你发送链接。