locastorage保存选择javascript

时间:2016-08-30 18:49:38

标签: javascript local-storage

<select id="Gender" onchange="fctCheck(this.value);">
        <option value="">Choose Gender</option>
        <option value="men">Men</option>
        <option value="wemen">Wemen</option>
        <option value="girls">Girls</option>
        <option value="boys">boys</option>
    </select>  
    <br>
       <br>
    <select id="men" name="subselector" style="display:none">
      <option value="">Choose an item</option> 
      <option value="tsm">T-Shirt</option>
      <option value="lsm">long sleeve</option>
     <option value="tankm">Tank Top</option>
     <option value="fzhm">Full zip Hood</option>
     <option value="pohm">Pull over Hood</option>
     <option value="fzfm">Full zip Fleece</option>
     <option value="fm">Fleece</option>
    </select>  
 
    
    <select id="wemen" name="subselector" style="display:none">
        <option value="slw">short sleeve</option>
 
    </select>  
    
     <select id="girls" name="subselector" style="display:none">
        <option value="shortsg">shorts</option>
        
    </select>  
 <select id="boys" name="subselector" style="display:none">
        <option value="tshirtb">tshirt</option>
       
    </select>  
     <div style='display:none;' id="wsl">
                       <div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
                </div>
                <div class="colore black" data-image="http://mebe.co/ford">
                </div>
                <div class="colore yellow" data-image="http://mebe.co/f150">
                </div>
                <div class="colore orange" data-image="http://mebe.co/yukon">
                </div>
                <div class="colore red" data-image="http://mebe.co/370z">
                </div>
            </div>
            
              <div style='display:none;' id="mtsm">
    <div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
    </div>
    <div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
    </div>
    <div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
    </div>
    <div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
    </div>
    <div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
    </div>
  </div> 

我想知道如何使用用户在下拉菜单中选择的信息在第二页上显示图像我被告知使用本地存储但我无法使其工作有人可以请教我究竟如何保存用户选择的所有下拉菜单的选择?我需要的是保存上一页的选择,我将负责其余的工作。

2 个答案:

答案 0 :(得分:0)

您可以保存对象中的所有值,然后使用。

将其设置为本地存储
using DataModels.Models;
...
public void ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddDbContext<DataModels.ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

    services.AddIdentity<ApplicationUser, IdentityRole>()
        .AddEntityFrameworkStores<DataModels.ApplicationDbContext>()
        .AddDefaultTokenProviders();

    services.AddMvc();

    // Add application services.
    services.AddTransient<IEmailSender, AuthMessageSender>();
    services.AddTransient<ISmsSender, AuthMessageSender>();
}

转移到第二页后

您可以使用

获取对象
var vals = {
  gender:"male" // object structure example
}; 
localstorage.setItem('nameforvalues', JSON.stringify(vals));

答案 1 :(得分:0)

这应该给你一个方向:

        function save() {
          localStorage.setItem("selection", document.getElementById("Gender").value);
        }

        window.onload = function() {
          console.log(localStorage.getItem("selection"));
        }
<select id="Gender" onchange="save()">
  <option value="">Choose Gender</option>
  <option value="men">Men</option>
  <option value="wemen">Wemen</option>
  <option value="girls">Girls</option>
  <option value="boys">boys</option>
</select>