sessionStorge的运用

sessionStorage 属性许可你接见一个 session Storage 对象。它与 localStorage 类似，差别之处在于 localStorage 内里存储的数据没有逾期时候设置，而存储在 sessionStorage 内里的数据在页面会话完毕时会被消灭。页面会话在阅读器翻开时期一向坚持，而且从新加载或恢复页面仍会坚持本来的页面会话。在新标签或窗口翻开一个页面时会在顶级阅读高低文中初始化一个新的会话，这点和 session cookies 的运转体式格局差别

语法

// 保留数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage猎取数据
var data = sessionStorage.getItem('key');

// 从sessionStorage删除保留的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除一切保留的数据
sessionStorage.clear();

例子

// 猎取文本输入框
var field = document.getElementById("field");
 
// 检测是不是存在 autosave 键值
// (这个会在页面有时被革新的情况下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢复文本输入框的内容
  field.value = sessionStorage.getItem("autosave");
}
 
// 监听文本输入框的 change 事宜
field.addEventListener("change", function() {
  // 保留效果到 sessionStorage 对象中
  sessionStorage.setItem("autosave", field.value);
});

localStorage的运用

只读的localStorage 许可你接见一个Document 的远端（origin）对象 Storage；数据存储为跨阅读器会话。 localStorage 类似于sessionStorage。区分在于，数据存储在 localStorage 是无限期的，而当页面会话完毕——也就是说当页面被封闭时,数据存储在sessionStorage 会被消灭

语法

//设定
localStorage.setItem('myCat', 'Tom')
//读取
let cat = localStorage.getItem('myCat');
//移除
localStorage.removeItem('myCat');
// 移除一切
localStorage.clear();

例子

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);
}