SessionStorage、LocalStorage详解

前端开发作者： 2024-08-22 01:10:01

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://blog.bitsrc.io/sessionstorage-and-localst

拥有更大的存储容量，Cookie是4k，Web Storage为5M。
操作数据相比Cookie更简单。
不会随着每次请求发送到服务端。

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

相关资讯： SessionStorage、LocalStorage详解

SessionStorage、LocalStorage详解

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签