localStorage 和 sessionStorage

localStorage 和 sessionStorage通过为每一个数据源维持一个存储区域，来存储键值。
sessionStorage（临时存储）:只存在于浏览器打开期间，即使页面重载也不会消失。
localstorage（长期存储）:即使浏览器关闭，数据依然存在。

应用场景

1.用于登录。
2.用于动态改变某些数据。MDN示例页面

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;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

API

• 存储

// 定义存储的文件
const info {
  name: 'lee',
  age: 20,
  sex: '女'
}
// 设置存储的键值
sessionStorage.setItem('key', JSON.stringify('info'));
localStorage.setItem('key1', JSON.stringify('info'));

• 提取

JSON.parse(sessionStorage.getItem('key')); 
JSON.parse(localStorage.getItem('key1')); 

• 删除

// 删除某个键值
sessionStorage.removeItem('key');
localStorage.removeItem('key1');
//清空所有键值
sessionStorage.clear();
localStorage.clear();

• 浏览器中查看
  Chrome中Application查看