会话存储多个输出字段

Question

我正在开发一个报价页面和订单页面，它们使用会话存储将来自两个范围滑块的信息和报价带到下一页。

到目前为止，我的两个范围滑块都在工作，但发现报价输出元素有困难。

我不能使用 Id，因为我在订单页面上有两个具有相同值的输出元素，所以我需要使用一个类，但不确定这是否适用于 sessionStorage.getItem

我也不确定应该使用什么事件监听器来激活报价中的会话存储。

以下是两个 sn-ps，我在需要帮助的地方注释掉并使用了问号。

这是我报价页面的代码。

if (true) {

  var weightOut = document.getElementById('weightOutputId'),
      weightIn = document.getElementById('weightInputId'),
      distanceOut = document.getElementById('distanceOutputId'),
      distanceIn = document.getElementById('distanceInputId');
      //calPrice = document.getElementsByClassName('calP');  ???


  weightOut.value = sessionStorage.getItem('weightOutputId');
  weightIn.value = sessionStorage.getItem('weightInputId');
  distanceOut.value = sessionStorage.getItem('distanceOutputId');
  distanceIn.value = sessionStorage.getItem('distanceInputId');
  //calPrice.value = sessionStorage.getItem('calP');  ???

 // window.onload = function (){                      ??
 //  sessionStorage.setItem('calP', calPrice.value);  ???
 //}                                                  ??

  weightIn.addEventListener('input', function () {
    sessionStorage.setItem('weightOutputId', weightOut.value);
    sessionStorage.setItem('weightInputId', weightIn.value);
  }, false);

   distanceIn.addEventListener('input', function () {
     sessionStorage.setItem('distanceOutputId', distanceOut.value);
     sessionStorage.setItem('distanceInputId', distanceIn.value);
   }, false);

}

<form action="#" method="post" oninput="quote.value = distanceInputId.value * weightInputId.value +4;">
  <label for="weightOutputId" class="formQ">
    Weight (kg):
  </label>
  <output name="weightOutputName" id="weightOutputId">
    1
  </output>
  <input type="range" name="weightInputName" id="weightInputId" value="1" min="1" max="10" oninput="weightOutputId.value = weightInputId.value" class="formR">
  <label for="distanceInputId" class="formQ">
    Distance (km):
  </label>
  <output name="distanceOutputName" id="distanceOutputId">
    1
  </output>
  <input type="range" name="distanceInputName" id="distanceInputId" value="1" min="1" max="20" oninput="distanceOutputId.value = distanceInputId.value" class="formR">

  <span class="calP">
    Calculated Price: €
  </span>
  <output name="quote" class="calP">
    5
  </output>
</form>

这是我的订单页面上的代码。

if (true) {

  var weightOut = document.getElementById('weightOutputId'),
      weightIn = document.getElementById('weightInputId'),
      distanceOut = document.getElementById('distanceOutputId'),
      distanceIn = document.getElementById('distanceInputId');
      //calPrice = document.getElementsByClassName('calP');  ???


  weightOut.value = sessionStorage.getItem('weightOutputId');
  weightIn.value = sessionStorage.getItem('weightInputId');
  distanceOut.value = sessionStorage.getItem('distanceOutputId');
  distanceIn.value = sessionStorage.getItem('distanceInputId');
  //calPrice.value = sessionStorage.getItem('calP');  ???

 // window.onload = function (){                      ??
 //  sessionStorage.setItem('calP', calPrice.value);  ???
 //}                                                  ??

  weightIn.addEventListener('input', function () {
    sessionStorage.setItem('weightOutputId', weightOut.value);
    sessionStorage.setItem('weightInputId', weightIn.value);
  }, false);

   distanceIn.addEventListener('input', function () {
     sessionStorage.setItem('distanceOutputId', distanceOut.value);
     sessionStorage.setItem('distanceInputId', distanceIn.value);
   }, false);

}

<form id="contact_form" action="#" method="post" oninput="quote.value = distanceInputId.value * weightInputId.value +4, quoteT.value = distanceInputId.value * weightInputId.value +4;">
  <label for="weightInputId" class="formQ">
    Weight (kg):
  </label>
  <output name="weightOutputName" id="weightOutputId">
    1
  </output>
  <input type="range" name="weightInputName" id="weightInputId" value="1" min="1" max="10" oninput="weightOutputId.value = weightInputId.value" class="formR">
  <label for="distanceInputId" class="formQ">
    Distance (km):
  </label>
  <output name="distanceOutputName" id="distanceOutputId">
    1
  </output>
  <input type="range" name="distanceInputName" id="distanceInputId" value="1" min="1" max="20" oninput="distanceOutputId.value = distanceInputId.value" class="formR">
  <span class="calP">
    Calculated Price: €
  </span>
  <output name="quote" class="calP" id="keepNum">
    5
  </output>
  <!-- the rest of my form goes here-->
  <span class="calP">
    Calculated Price: €
  </span>
  <output name="quoteT" class="calP">
    5
  </output>
</form>

Answer 1

这是我的第一次尝试，让我们一起编辑。

'use strict'; // Strict mode is a good thing.

// ... Somehow you get a value for your price and store it:

const calculatedPrice = ...;
sessionStorage.setItem('calP', calculatedPrice)

// ... Then you read it and fill multiple fields with it.

let calculatedPrice = parseFloat(sessionStorage.getItem('calP'));
if (!calculatedPrice && calculatedPrice !== 0) {
  calculatedPrice = ...; // Get it somehow.
  sessionStorage.setItem('calP', calculatedPrice); // Update it.
}

// Now render all the fields!
const elements = Array.from(document.getElementsByClassName('calP'));
elements.forEach(function(el) { el.innerText = calculatedPrice; })

el.innerText 填充元素的全部内容。如果你需要像模板一样用“洞”填充它，那么它需要更多的代码——问我吧）。