web存储机制localStorage和sessionStorage
Posted 森海轮回
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web存储机制localStorage和sessionStorage相关的知识，希望对你有一定的参考价值。
https://www.cnblogs.com/yaoyuqian/p/7901052.html
web存储包括两种：sessionStorage 和 localStorage（都是限定在文档源级别，非同源文档间无法共享）
1.sessionStorage 数据放在服务器上（IE不支持）
严格用于一个浏览器会话中存储数据，数据在浏览器关闭后会立即删除
2.localStorage 数据在客户端（低版本IE ( IE6, IE7 ) 不支持，并且不支持查询语言）
跨会话持久化地存储数据
localStorage与sessionStorage的区别：
localStorage只要在相同的协议、相同的主机名、相同的端口下，即同源就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
用法相同：（以sessionStorage为例）
1.添加：
sessionStorage.setItem(key, value);//value可以任何数据类型
2.获取：
sessionStorage.getItem(key);
3.删除：
sessionStorage.removeItem(key);//删除该存储对象中key的键值对
4.清除所有：
sessionStorage.clear();//清除该存储对象中所有的键值对
5.检索（查）：
sessionStorage.key();//检索key[n]的值
实例：
localStorage.setItem("x",1);//以"x"的名字存储一个数值
localStorage.x = 1;//直接向 Web 存储对象添加键/值对
localStorage.getItem("x");//获取数值
localStorage.x;//直接从 Web 存储对象中检索键/值对
localStorage.removeItem("x");//删除“x”项。
//removeItem是唯一通用的能删除单个名值对的方式。（因为IE8不支持delete操作符）
localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式
//将一个数组存储为字符串
var myArray = new Array(\'First Name\', \'Last Name\', \'Email Address\');
localStorage.formData = JSON.stringify(myArray);
//检索数组的字符串版本并将它转换成一个可用的 javascript 数组
var myArray = JSON.parse(localStorage.formData);
还有一种更实用的存取方法：
var obj = {
name: \'doctorhou\',
describe: \'高大、威猛、帅气\'
};
localStorage.setItem(\'test\', JSON.stringify(obj));
var getObj = JSON.parse(localStorage.getItem(\'test\'));
// 存储数据发生改变的时候（对应事件）：window.onstorage
示例：
<body>
<h3>这是我的用户名和密码</h3>
<div id="username"></div>
<div id="password"></div>
<script>
// 1.获取对象
var username = document.getElementById(\'username\');
var password = document.getElementById(\'password\');
// 2.将存储的数据写入到两个div中
username.innerhtml = localStorage.getItem(\'username\');
password.innerHTML = localStorage.getItem(\'password\');
// 3.做stroage的事件监听
window.onstorage = function(e) {
// StorageEvent
// console.log(e);
// console.log(e.key);修改的键
// console.log(e.oldValue);原来的值
// console.log(e.newValue);新值
username.innerHTML = e.newValue;
}
</script>
</body>
以上是关于web存储机制localStorage和sessionStorage的主要内容，如果未能解决你的问题，请参考以下文章
Web存储机制—sessionStorage,localStorage使用方法
Web存储机制—sessionStorage,localStorage使用方法
sessionStorage localStorage 和 cookie 之间的异同