Wordpress how to use shortcode to get a value from localStorage

Question

Problem:
I need to create a shortcode that contains a value extracted from a strong tag.
When I echo "document.write(localStorage.getItem('getnum'));";
the code shows the value 85.
But when I return it (the following code), the shortcode [showpoints] shows no value.
Would you please let me know how to return the value?

Code I tried:

    <?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');

Console:
No error

HTML (code came from a yith point & reward plugin):

<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

1. You would need to set the value first so that you could get it later on! On line 6 you would need to set it.
2. Replace return with echo in your callback function.
3. You would need to call your short code by using do_shortcode in your template!

So your code would be something like this:

<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]');

This do_shortcode('[showpoints]'); will do the magic here! So place it on your template where you want to output the value.

---

Alternative way

According to Mozilla Docs you do not need to use JSON.stringify to set a single string value to localStorage , but just in case you can't get the first method to work, use the following code instead:

<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]');

---

Another way using return

If you would need to return the value in your callback function, then use this code:

<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]');