HTML5 Game - Save data to local storage and session storage

  1. HOME
  2. HTML5 Game
  3. indexedDB
  4. Store data in indexedDB

Description

Save data to local storage and session storage

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Read Text</title>

<style>
body {/*w  w  w .j  a v  a2 s  .  c o m*/
  font-family: 'Palatino Linotype', serif;
  max-width: 600px;
  padding: 0px 30px;
}

fieldset {
  margin-bottom: 15px;
  padding: 10px;
}

legend {
  padding: 0px 3px;
  font-weight: bold;
  font-variant: small-caps;
}

label {
  width: 140px;
  display: inline-block;
  vertical-align: top;
  margin: 6px;
}

input {
  margin-top: 12px;
  width: 300px;
}
</style>
<script>
function saveData() {
  let localData = document.getElementById("localData").value;
  let sessionData = document.getElementById("sessionData").value;

  localStorage.setItem("localData", localData);  
  sessionStorage.setItem("sessionData", sessionData);
}

function loadData() {
  let localData = localStorage.getItem("localData");  
  let sessionData = sessionStorage.getItem("sessionData");

  if (localData != null) {
    document.getElementById("localData").value = localData;
  }
  if (sessionData != null) {
    document.getElementById("sessionData").value = sessionData;
  }
}
</script>

<body>
  <fieldset>
    <legend>Web Storage</legend>
    <label for="localData">This goes into local storage:</label>
    <input id="localData"><br>
    <label for="sessionData">This goes into session storage:</label>
    <input id="sessionData">
  </fieldset>
  <div>
    <button onclick="saveData()">Save Data</button>
    <button onclick="loadData()">Load Data</button>
  </div>
</body>
</html>

Related Topic