sessionStorge和localStorage的使用-踩坑记_09

Jochen 发布于2019-08-23 13:41 / 2743人阅读

摘要：的使用属性允许你访问一个对象。它与相似，不同之处在于里面存储的数据没有过期时间设置，而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

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

GPU云服务器云服务器踩坑记 localstorage使用采坑记 sessionStorge

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99399.html

sessionStorge和localStorage的使用-踩坑记_09

摘要：的使用属性允许你访问一个对象。它与相似，不同之处在于里面存储的数据没有过期时间设置，而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。 sessionStorge的使用 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 lo...

PrototypeZ 2019-08-02 12:06 评论0 收藏0
踩坑记[持续更新]

摘要：解决的中只有一个生命周期的钩子也只有一句代码报错中的就是整个组建中的原来是写在了使用指令的后面所以此时还没有在组件中注册所以会报错误正确代码标题这是一段内容这是一段内容这是一段内容这是一段内容。用于记录coding过程中遇到的比较难解决或者有意思的问题,包括前端/后端(Node/Db),会持续更新... 后端 Node redis集群模式下pipline报错(2019.3.14) ...

0x584a 2019-06-26 17:24 评论0 收藏0
踩坑记[持续更新]

摘要：解决的中只有一个生命周期的钩子也只有一句代码报错中的就是整个组建中的原来是写在了使用指令的后面所以此时还没有在组件中注册所以会报错误正确代码标题这是一段内容这是一段内容这是一段内容这是一段内容。用于记录coding过程中遇到的比较难解决或者有意思的问题,包括前端/后端(Node/Db),会持续更新... 后端 Node redis集群模式下pipline报错(2019.3.14) ...

ckllj 2019-08-21 16:45 评论0 收藏0