SessionStorage、LocalStorage详解

前端开发 作者: 2024-08-22 01:10:01
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/sessionstorage-and-localst
  1. 拥有更大的存储容量,Cookie是4k,Web Storage为5M。
  2. 操作数据相比Cookie更简单。
  3. 不会随着每次请求发送到服务端。
sessionStorage = window.sessionStorage
localStorage = window.localStorage
//存储一个item
  storage.setItem('name','Alice')
  storage.setItem('age','5')
//读取一个item
  storage.getItem('name') // returns "Alice"
//get存储对象长度
  storage.length // returns 2
//通过索引get对应的key名
  storage.key(0) // returns "name"
//移除一个item
  storage.removeItem('name')
//清空存储对象
  storage.clear()
  • 用户名密码
  • 信用卡资料
  • JsonWeb令牌
  • API密钥
  • SessionID
  • 尽量不要用同一域名部署多个Web应用程序,如果有这种场景请尽量使用子域名部署应用,因为一旦多应用使用统一的域名,这将会对所有的用户共享Web存储对象。
  • 一旦将数据存储在LocalStorage中,开发人员在用户将其清除之前无法对其进行任何控制。如果希望在会话结束后自动删除数据,请使用SessionStorage。
  • 从WebStorage读取出的数据都要验证、编码和转义。
  • 在保存进WebStorage前将数据加密。
<!DOCTYPE html>
<html>
<body>
<h2>表单示例</h2>
<form>
  <label for="lname">姓氏:</label><br>
  <input type="text" id="lname" name="lname" value="" onchange="save(this)">
  <label for="fname">名字:</label><br>
  <input type="text" id="fname" name="fname" value="getValue(this)" onchange="save(this)"><br>
</form>
<script>
  localStorage= window.localStorage
  function save(input) {
    localStorage.setItem(input.id,input.value)
  }
document.getElementById("fname").value=localStorage.getItem("fname")
 document.getElementById("lname").value=localStorage.getItem("lname")
</script>
</body>
</html>
window.addEventListener('storage',() => {
  ...
});

window.onstorage = () => {
  ...
};
  • 没有敏感数据
  • 数据尺寸小于 5MB
  • 高性能并不重要
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66393.html