Home>

I want to get input text (name ="text1") data dynamically with HTML () using jquery.
Using localStorage, I would like to save the HTML text as temporary data and retrieve it again when reloading.
However, since the data entered by the user cannot be obtained with html (), the value is returned with val ()
I thought about getting it, but
I want to increase the number of input texts dynamically with append () and so on, so I don't want to do so with val ().
As a code, I want to keep the contents of the text box after the screen transitions by entering characters in the displayed text box.

<script type = "text/javascript">
$(function () {
$("# divTest"). html (localStorage.getItem ("divData"));
    // Store temporary data when the cross button or (return button) is pressed
    $(window) .on ("beforeunload", function (e) {
        localStorage.setItem ("divData", $("# divTest"). html ());
        alert ($("# divTest"). html ());// for display
    });

});
</script>
<div>
    <input type = "text" name = "text1" value = "" />
</div>
  • Answer # 1

    First, the result of the firstlocalStorage.getItem ("divData")is thrown into#divTestwithout any questions and answers. WhendivDatacannot be obtained, the stringundefinedwill be embedded indiv. It will be returned as a string, so it is better to set it after confirming that it is not'undefined'.
    I'm sorry. The strikethrough is incorrect.
    Ifkeydoes not exist ingetItem ('key'),nullis returned.
    MDN Storage.getItem ()

    Next, I would like to save the result obtained with.html ()in the main subject to localStorage, but unfortunately it is not possible to save the user input value as it is.
    .html ()can only retrieve data that has been exported to HTML. Anything entered by the user in the text box will not be exported to HTML in real time, so user input values ​​will not be retrieved even if retrieved with.html ().

    So, as a method, the value acquired by.val ()was saved, and at the same time, the number and configuration ofinputwere decided by myself instead of HTML Save as format data.
    When displaying the screen, first restore theinputelement based on the number and configuration data ofinput, and then backfillvalue. I think that it is better to consider in the form.

  • Answer # 2

    Vulnerability issues

    If you are creating a site that you want to publish externally, you should stop giving the data in localStrage to the jQuery html () method as it is.

    For example, on a shared PC in a library, a malicious person opens your site, enters the following into input, and creates a link to your page on the desktop. Let's do it.

    <script>alert ('You are under virus threat')</script>

    If you open a link on that PC,
    Suddenly a malicious script is executed on your site.

    It is a dangerous vulnerability to be able to execute arbitrary malicious requests from your site, even if the virus was installed by a third party.

    Answer

    Now, it is the answer to the question, but even if there are an unknown number of inputs, I think that it can be handled by using an array. When storing an array in localStrage, it can be converted into JSON format and stored.
    For example, you can write:

    <body>
      <div id = "divTest"></div>
      <button id = "append">add input</button>
    </body>
    $(function () {
      // Script to run when leaving the page
      $(window) .on ("beforeunload", function () {
        const data = $("# divTest>input")
          .map (function () {return $(this) .val ()})
          .get ();
        / * Convert array to JSON format and store * /
        localStorage.setItem ("divData", JSON.stringify (data));
      });
      // Script to restore on page load
      {
        const data = localStorage.getItem ("divData") || "['']";
        / * Restore from JSON to array * /
        JSON.parse (data)
          .map (function (d) {return $("<input>"). val (d)})
          .forEach (function ($el) {$el.appendTo ("# divTest")})
      }
      // Add input with a button click
      $("# append"). on ("click", function () {$("# divTest"). append ($("<input>"))})
    });


    Please devise proper restoration of attributes and ids.