Saving HTML data Client-side

user_12908241 0
Viewed 58

If I assign a text input tag to the id stored_data1 in the code below, would I be able to save my data client-side (such as saving it on a flash drive)?

HTML

Data that is retrieved will appear here
<div id="dataStore"></div>

JS

<script>
  if (typeof Storage !== 'undefined') {
    localStorage.setItem('stored_data1', 'Blue Box');
    document.getElementById('dataStore').innerHTML =
      localStorage.getItem('stored_data1');
  } else {
    // in case web storage is not supported
    document.getElementById('dataStore').innerHTML =
      'Web storage not supported.';
  }
</script>

The code above is a web storage API for HTML. I'm hoping to find a way to eventually fit it into some programs I made.

html javascript
2 Answers

You can download the information on the tag using the following code

//create a function to download text to textfile
function downloadText(text, filename){
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
}


//get Text Value then download 
var textValue = document.getElementById("test").innerText;
download(textValue, "store_data");
user_134398470 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>Data that is retrieved will appear here</p>
<div id="dataStore"></div>
</body>
    <script>
    if (typeof(Storage) !== "undefined") {
      window.localStorage.setItem("stored_data1", "Blue Box");
      document.getElementById("dataStore").innerHTML = window.localStorage.getItem("stored_data1");
    } else {
      document.getElementById("dataStore").innerHTML = "Web storage not supported.";
    }
</script>
</html>
user_67223870
Related