localStorage的通过ID上，单击保存多个列表项的内容，并获得不同的网页上保存的内容 [英] localStorage save content of multiple list items by id on click and get saved content on different page

问题描述

我想拥有的功能，你可以点击使我的店的链接，并将其保存根据id李的内容，并在李的内容被拉到另一页。

I'm trying to have functionality where you can click on the, "MAKE IT MY STORE," link and it saves the content of the li based on the id and will pull the content of the li onto another page.

这code：

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

输出

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

和通过，psented数1075再$ P $@id的基础上每家商店的位置变化，有多个位置。

and the number 1075 represented by, "@id," changes based on each store location and there are multiple locations.

在本节锂自动生成后台添加任何商店位置。于是在其前端当前显示多个列表项的存储位置。

The li in this section auto-generates any store locations added in the backend. So on the frontend it currently displays more than one list item store location.

<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>

现在我把它设置保存，UL ID =storeList的状态下使用localStorage.setItem点击时。然后#storeList的ID出现在code的任何时间将在任何值拉被保存到localStorage的，如下所示：

Right now I have it setup to save the state of the, ul id="storeList" when clicked using localStorage.setItem. And then any time the id of #storeList appears in the code it will pull in whatever value was saved to localStorage as seen below:

$(function() {

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

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

});


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

}

显然，这不是我想要做的事。相反，我希望它拯救每一个人里的内容点击。我想code是这样的：

Obviously this is not what I want it to do. Instead I want it to save the content of each individual li clicked. I want the code to be something like this:

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

或者VAR ID等于所有可能的存储ID号的数组。

or maybe var id equals an array of all the possible store id numbers.

主要目的是商店定位器页面，您可以在一个或多个商店的点击，并将它们保存到我的店铺页面。我几乎有它的工作，但我碰了壁。任何帮助将是真棒，让我知道如果有什么我需要澄清。我从来没有使用ASP工作，所以这是棘手的我，这是我第一次从头开始做任何的jQuery或JavaScript。我最初尝试使用它与Cookie，但决定使用localStorage的，而不是因为没有用户登录。

The main purpose is a store locator page where you can click on one or more of the stores and save them to your, "My Store," page. I almost have it working but I've hit a wall. Any help would be awesome and let me know if there is anything I need to clarify. I don't ever work with ASP so this is tricky for me and this is my first time doing any jQuery or javascript from scratch. I originally tried using it with cookies but decided to use localStorage instead since there is no user login.

推荐答案

我刚刚完成一个类似的项目类型，希望这将让你在正确的方向

I just finished a similar type project, hopefully this will get you in the right direction

里面的文件准备好功能：

Inside the document ready function:

$('.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'));
 });

现在你可以有一个集合，你可以通过店内的IDS访问，尽管它可能是更好的存储整个本地存储值作为一个JSON对象进行迭代THRU，无论你preFER

Now you can have a collection you can access via store ids, although it might be better to store the entire local storage value as a JSON object to iterate thru, whichever you prefer

继承人到使用本地存储，如果你想引用的 https://github.com/Jrizzi1/ND-mSummit-bingo/blob/master/js/script.js

Heres a link to my project javascript that used local storage if you would like reference https://github.com/Jrizzi1/ND-mSummit-bingo/blob/master/js/script.js

这篇关于localStorage的通过ID上，单击保存多个列表项的内容，并获得不同的网页上保存的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！