SessionStorage、LocalStorage详解
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：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
- 高性能并不重要
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
