时间戳

首页 > 解决方案 > 在 Wix HTML 元素中使用本地存储 (JavaScript)

javascript - 在 Wix HTML 元素中使用本地存储 (JavaScript)

问题描述

我使用 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 中）的值。

标签： javascripthtmlapistoragevelo

解决方案

这个例子正是你想要做的：https ://www.wix.com/code/home/example/Chart 。

推荐阅读