如何将段落恢复到以前的状态

Question

我有一个小型网络工具，可以帮助创建图像的元数据，这些图像可以在html描述中轻松使用，并在以后查看详细信息。

工具/应用程序的当前状态是完美的，除了一个事实，这是以下内容：我希望能够在单击按钮后恢复已更改段落的状态＆＃34;返回＆＃34 ;所以我可以修复任何丢失的字段或删除不需要的字段，然后将其更新为新状态而不重做整个过程

我无法分享代码的特定区域，因为我没有对后退按钮进行此类调用，我想知道它是否可以使用javascript？< / p>

我现在在后退按钮调用中唯一使用的是在可见div之间切换：

//Switch divs on button click
    function switchVisible() {
            if (document.getElementById('inputmeasurements')) {

                if (document.getElementById('inputmeasurements').style.display == 'none') {
                    document.getElementById('inputmeasurements').style.display = 'block';
                    document.getElementById('finishedmeasurements').style.display = 'none';
                }
                else {
                    document.getElementById('inputmeasurements').style.display = 'none';
                    document.getElementById('finishedmeasurements').style.display = 'block';
                }
            }
}

以下是该工具的jsfiddle：https://jsfiddle.net/7r9zdcvo/

目前＆＃34;转换＆＃34;按钮使用这些调用（并切换上面提到的可见div）：

//Convert input into formated metadata
function myFunction5() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B1/g, id:"bust"},
    { regex: /W1/g, id:"waist"},
    { regex: /H1/g, id:"hips"},
    { regex: /L1/g, id:"lng"},
    { regex: /S1/g, id:"shl"},
    { regex: /S2/g, id:"slv"},
    { regex: /I1/g, id:"ins"},
    { regex: /TITLE/g, id:"title"},
    { regex: /SPECIFICS/g, id:"specifics"},
    { regex: /MERC/g, id:"mercedes"},
    { regex: /SUPPLIER/g, id:"supplier"},
    { regex: /DATE/g, id:"date"},
    { regex: /WEIGHT/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

//Convert input into formated metadata
function myFunction6() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B2/g, id:"bust"},
    { regex: /W2/g, id:"waist"},
    { regex: /H2/g, id:"hips"},
    { regex: /L2/g, id:"lng"},
    { regex: /S3/g, id:"shl"},
    { regex: /S4/g, id:"slv"},
    { regex: /I2/g, id:"ins"},
    { regex: /SPEC2/g, id:"specifics"},
    { regex: /SUPP2/g, id:"supplier"},
    { regex: /DAT2/g, id:"date"},
    { regex: /WGT2/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

它转换在此div中的输入/文本区域中输入的输入数据：

<div id="inputmeasurements">
                        <p id="topmeasurement" align=left>
                        <input type="text" class="topm" id="weight" name="weight" placeholder="Weight"><br>
                        <input type="text" class="topm" id="supplier" name="supplier" placeholder="Supplier"><br>
                        <input type="text" class="topm" id="date" name="date" placeholder="Date"><br>
                        <textarea class="topm" id="specifics" name="specifics" placeholder="Specifics" style="height: 30px;"></textarea><br>
                        <textarea class="topm" id="mercedes" placeholder="Enter Any Aditional Data Here"></textarea><br>
                        <textarea type="text" class="topm" id="title" name="title" maxlength="80" placeholder="TITLE" style="height: 30px;"></textarea><span id="counter"></span><br><br>                      
                        </p>
                        <p id="botmeasurement">
                        <input type="text" class="botm" id="bust" name="bust">&nbsp;Bust<br>
                        <input type="text" class="botm" id="waist" name="waist">&nbsp;Waist<br>
                        <input type="text" class="botm" id="hips" name="hips">&nbsp;Hips<br>
                        <input type="text" class="botm" id="lng" name="lenght">&nbsp;Lenght<br>
                        <input type="text" class="botm" id="shl" name="shoulders">&nbsp;Shoulders<br>
                        <input type="text" class="botm" id="slv" name="sleeves">&nbsp;Sleeves<br>
                        <input type="text" class="botm" id="ins" name="inseam">&nbsp;Inseam<br>
                        </p>
                        <div id="enter-meta-wrap">
                            <p style="text-align: center;">Convert measurements to html ready metadata</p> 
                            <button id="enter-meta" onclick="myFunction5();myFunction6();switchVisible();">Convert</button>
                            <button id="new-meta" onclick="myFunction3()">New</button>
                        </div>
        </div>

...进入这个div中的段落：

<div id="finishedmeasurements">
            <table id="grid" cellspacing="0" cellpadding="0">
                <tr onclick="clipboard(this);">
                    <td>
                        <p id="m1" align=center>
                        bB2 wW2 hH2 lL2 shS3 slvS4 insI2 | SPEC2 | SUPP2 | DAT2 | WGT2 <br><br>
                        TITLE<br>
                        SPECIFICS<br>
                        SUPPLIER | DATE | WEIGHT<br><br>
                        MERC<br><br>
                        B1 Bust inches flat&lt;/br&gt;<br>
                        W1 Waist inches flat&lt;/br&gt;<br>
                        H1 Hips inches flat&lt;/br&gt;<br>
                        L1 Length &lt;/br&gt;<br>
                        S1 Shoulders &lt;/br&gt;<br>
                        S2 Sleeves &lt;/br&gt;<br>
                        I1 Inseam &lt;/br&gt;<br>
                        &lt;/FONT&gt;&lt;/p&gt;
                        </p>
                    </td>
                </tr>
             </table>
                    <div id="new-meta-wrap">
                        <p style="text-align: center;">Convert measurements to html ready metadata</p>
                        <button id="go-back" onclick="switchVisible();">Back</button>
                        <button id="new-meta" onclick="myFunction3()">New</button>
                    </div>
        </div>