javascript - localStorage点击时按id保存多个列表项的内容并在不同页面上获取保存的内容

Question

我正在尝试提供一种功能，您可以单击“使其成为我的商店”链接，它会根据 id 保存 li 的内容，并将 li 的内容拉到另一个页面上。

这段代码:

<li><xsl:attribute name="id">store-<xsl:value-of select="@id"/></xsl:attribute></li>

输出到

<li id="store-1075"></li> 

“@id”代表的数字 1075 根据每个商店位置而变化，并且有多个位置。

此部分中的 li 会自动生成后端添加的任何商店位置。因此，当前在前端显示多个列表项存储位置。

<ul id="storeList">
    <xsl:for-each select="$currentPage/* [@isDoc]">
      <xsl:sort select="@nodeName" order="ascending" />
        <li>
          <xsl:attribute name="id">store-<xsl:value-of select="@id"/></xsl:attribute>

            <a href="{umbraco.library:NiceUrl(@id)}">
                <img class="location-image" alt="">
                    <xsl:attribute name="src">
                        <xsl:value-of select="storeImage"/>
                    </xsl:attribute>
                </img>
            </a>

           <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:value-of select="location"/>
            </a>

            <p><xsl:value-of select="./address"/></p>
            <p><xsl:value-of select="./addressCity"/></p>

            <div class="makeMyStoreWrapper"><a class="makeMyStore" href="#"><xsl:attribute name="id">store-<xsl:value-of select="@id"/></xsl:attribute>MAKE IT MY STORE</a></div>

        </li>
    </xsl:for-each>
</ul>

现在，我已将其设置为在使用 localStorage.setItem 单击时保存 ul id="storeList"的状态。然后，只要 #storeList 的 id 出现在代码中，它就会提取保存到 localStorage 的任何值，如下所示:

$(function() {

var save = $('#storeList').get(0);

$(save).click(function() {
localStorage.setItem('saved', this.innerHTML);

});


if ( localStorage.getItem('saved') ) {
save.innerHTML = localStorage.getItem('saved');

}

显然这不是我想要的。相反，我希望它保存单击的每个单独的内容。我希望代码是这样的:

var id = any of the store ids or the specific ids, whatever works better.
var save = document.getElementById('store'+id);

或者 var id 可能等于所有可能的商店 ID 号的数组。

主要用途是一个商店定位器页面，您可以在其中单击一个或多个商店并将它们保存到您的“我的商店”页面。我几乎可以正常工作了，但我遇到了困难。任何帮助都会很棒，如果有什么需要澄清的，请告诉我。我从来没有使用过 ASP，所以这对我来说很棘手，这是我第一次从头开始做任何 jQuery 或 javascript。我最初尝试将其与 cookie 一起使用，但由于没有用户登录，所以决定使用 localStorage。

Answer 1

我刚刚完成了一个类似类型的项目，希望这能让您朝着正确的方向发展

文档就绪函数内部:

$('.store').on('click', function () { // something with the class store clicked
    var storeStorageKey = $(this).attr('id'); // store id of the item 

        $(this).data('value', 1); // use of html5 data values on the html line helped alot, just settin static right now
 //set in local storage so refreshing the page remembers what youve clicked
        localStorage.setItem(storeStorageKey, $(this).data('value'));
 });

现在您可以拥有一个可以通过存储 id 访问的集合，尽管将整个本地存储值存储为 JSON 对象以进行迭代可能会更好，无论您喜欢哪种方式

如果您想引用的话，这是我的项目 javascript 的链接，该项目使用本地存储 https://github.com/Jrizzi1/ND-mSummit-bingo/blob/master/js/script.js