Wordpress 如何使用短代码从 localStorage 获取值

Question

问题：
我需要创建一个短代码，其中包含从强标签中提取的值。
当我回显“document.write(localStorage.getItem('getnum'));”;
代码显示值 85.
但是当我 return 它（以下代码）时，简码 [showpoints] 显示没有价值。
你能告诉我如何 return 这个值吗？

我试过的代码：

    <?php
         ?>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        let getnum = $('div.elementor-widget-container p > strong').text();
        JSON.parse(localStorage.getItem('getnum'));
      });
    </script>

    <?php
    function points_show_function() {
    return "<script>document.write(localStorage.getItem('getnum'));</script>";
    }
    add_shortcode('showpoints', 'points_show_function');

控制台：
没有错误

HTML（代码来自 yith point & reward 插件）：

<div class="elementor-element elementor-element-c1d0790 elementor-widget elementor-widget-text-editor" data-id="c1d0790" data-element_type="widget" id="pointsid" data-widget_type="text-editor.default">
    <div class="elementor-widget-container">
        <p>Your credit is  <strong>85</strong> Points</p>                       
    </div>
</div>

Answer 1

您需要先设置该值，以便稍后获取！在 6 行，您需要进行设置。
将回调函数中的 return 替换为 echo。
您需要在模板中使用 do_shortcode 来调用您的短代码！

所以你的代码应该是这样的：

<script type="text/javascript">
  jQuery(document).ready(function($) {
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem('getnum', getnum);
  });
</script>

<?php
add_shortcode('showpoints', 'points_show_function');

function points_show_function()
{
  echo "<script>document.write(localStorage.getItem('getnum'));</script>";
}

do_shortcode('[showpoints]');

这个 do_shortcode('[showpoints]'); 会在这里发挥作用！所以把它放在你想要输出值的模板上。

另一种方式

根据 Mozilla Docs，您不需要使用 JSON.stringify 将单个字符串值设置为 localStorage，但以防万一您无法使用第一种方法，请改用以下代码：

<script type="text/javascript">
  jQuery(document).ready(function($) {
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem('getnum', JSON.stringify(getnum));
  });
</script>

<?php
add_shortcode('showpoints', 'points_show_function');

function points_show_function()
{
  echo "<script>document.write(JSON.parse(localStorage.getItem('getnum')));</script>";
}

do_shortcode('[showpoints]');

另一种使用方式 return

如果您需要 return 回调函数中的值，请使用此代码：

<script type="text/javascript">
  jQuery(document).ready(function($) {
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem('getnum', JSON.stringify(getnum));
  });
</script>

<?php
add_shortcode('showpoints', 'points_show_function');

function points_show_function()
{
  return "<script>document.write(JSON.parse(localStorage.getItem('getnum')));</script>";
}

echo do_shortcode('[showpoints]');

Wordpress 如何使用短代码从 localStorage 获取值

Wordpress how to use shortcode to get a value from localStorage

javascript

php

wordpress

jquery

shortcode