在Wix HTML元素中使用本地存儲（JavaScript）

Question

我使用Google Charts在Wix頁面上創建了一個HTML元素。 我的網頁訪問者需要填寫調查表，其想法是通過餅圖將結果提供給他們。 這是我的HTML元素代碼的一部分：

<script type="text/javascript">

var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: {
        labels:["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"],
        datasets: [{
            data: [10, 20, 30, 20, 25, 40, 15],
            backgroundColor: ["#f97a03", "#52aff0", "#35a11d", "#f052e4", "#853fc2", "#f0f712", "#092978"],
        }]
    },
    options: {}
});

</script>

上面的代碼效果很好，我可以在網頁上看到圖表。 現在，我不再使用預定的數據（例如上面的10、20、30、20、25、40、15），而是使用其值存儲在LocalStorage JavaScript中的變量（變量名稱與上述標簽相同，但以“ loc”作為前綴）。

我試過了：

data: [local.getItem("locrodeo"), local.getItem("loccalypso"), 
local.getItem("locsaya"), local.getItem("locbalthazar"),
local.getItem("locluna"), local.getItem("lockiara"), 
local.getItem("locmistral")],

但我認為API在wix HTML組件下不能與JS一起使用。 所以我想我需要從頁面代碼向其中包含信息的HTML元素發送一條消息。 有誰知道這是怎么做到的嗎？

從Wix幫助中心，我發現我需要發送如下消息：

$w("#myHtmlElement").postMessage("Message for HTML Comp");

然后我需要在我的HTML元素中編寫代碼來接收信息：

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;
    }
  };

  //...

</script>

為了清楚起見，我的目標是讓餅圖顯示locrodeo，loccalypso，locsaya，locluna，locbalthazar，locmistral和lockiara變量的值（存儲在本地存儲JS中）。

Answer 1

這個例子正是您想要做的事情： https ： //www.wix.com/code/home/example/Chart 。