Web Storage 包含如下两种机制:
sessionStorage
为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。localStorage
同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。
这两种机制是通过 Window.sessionStorage
和 Window.localStorage
属性使用(更确切的说,在支持的浏览器中 Window
对象实现了 WindowLocalStorage
和 WindowSessionStorage
对象并挂在其 localStorage
和 sessionStorage
属性下)—— 调用其中任一对象会创建 Storage
对象,通过 Storage
对象,可以设置、获取和移除数据项。对于每个源(origin)sessionStorage
和 localStorage
使用不同的 Storage 对象——独立运行和控制。
语法
// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
返回一个storage对象
<div>
<input type="text" name="" id="field" value="" />
<button id="deleted">deleted</button>
<button id="clear">clear</button>
</div>
<script type="text/javascript">
var clear = document.getElementById("clear");
var deleted = document.getElementById("deleted");
var field =document.getElementById("field");
if (sessionStorage.getItem("autoSave")) {
field.value = sessionStorage.getItem("autoSave");
}
field.addEventListener("change", function() {
// 保存结果到 sessionStorage 对象中
//写两个为了后面对于删除和清除的区别
sessionStorage.setItem("autosave", field.value);
sessionStorage.setItem("autosave1", field.value);
});
clear.οnclick=function(){
sessionStorage.clear();
};
deleted.οnclick=function(){
sessionStorage.removeItem("autosave");
};
</script>
注意点:
1、页面刷新不会消除数据,浏览器或者页面关闭才会清除数据;
2、
sessionStorage不跨窗口,在另外一个窗口打开sessionStorage就不存在了,它只在当前窗口有效;
3、大小不超过5M;
4、不自动发送数据到服务器;
5、使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据