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
原文地址：https://www.cnblogs.com/beimingbingpo/p/9603563.html