Storage getItem() 方法示例-实例在线编辑器(cainiaoplus.com)

<!DOCTYPE html>
<html>
<title>Storage getItem() 方法示例 - 基础教程(cainiaoplus.com)</title>

<head>
<style>
form, li {
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: 'Open Sans Condensed', sans-serif;
}
form div {
  margin: 0;
  width: 100%;
  padding-bottom: .5rem;
}
</style>
</head>
<body>
<h2>Web storage</h2>

<p>此示例旨在演示Web存储API的使用。从下面的下拉菜单中选择自定义背景颜色、徽标和字体，然后尝试关闭和重新打开页面—您将发现您的选择被记住了，因为它们是使用Web存储存储的。</p>

<form>
  <div>
    <label for="bgcolor">选择背景颜色:</label>
    <input type="color" id="bgcolor" value="#FF0000">
  </div>
  <div>
    <label for="font">选择字体样式:</label>
    <select id="font">
    	<option value="'Open Sans Condensed', sans-serif" selected>Sans-serif</option>
    	<option value="'Bitter', serif">Serif</option>
    	<option value="'Monospace'">Monospace</option>
    </select>
  </div>
  <div>
    <label for="image">选择图片:</label>
    <select id="image">
   	    <option value="/run/images/parrot-icon.png" selected>Parrot</option>
    	<option value="/run/images/avatar-female.jpg">Babe</option>
        <option value="/run/images/avatar-male.jpg">Dude</option>
    </select>
  </div>
</form>

var bgcolorForm = document.getElementById('bgcolor');
var fontForm = document.getElementById('font');
var imageForm = document.getElementById('image');

if(!localStorage.getItem('bgcolor')) {
   populateStorage();
} else {
   setStyles();
}

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);

setStyles();
}

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

root.style.backgroundColor = currentColor;
  p.style.fontFamily = currentFont;
  img.setAttribute('src', currentImage);
}

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;
</script>

</body>
</html>