在html5之前，浏览器要实现数据的存储，一般都是用cookie，但是cookie有域名和大小限定.
html5流行之后，可以通过localStorage和sessionStorage实现浏览器端的数据存储，这两者有什么特点呢？
sessionStorage
sessionStorage属于临时会话，数据存储的有效期为：从页面打开到页面关闭的时间段,属于窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储（可以手动删除数据）
存储量限制 ( 5M )
-
客户端完成，不会请求服务器处理
sessionStorage数据在页面之间不能共享、 而localStorage可以实现页面之间共享
sessionStorage的应用:
html>
<meta>
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
window.sessionStorage.setItem("name", aInput[3].value );
};
aInput[1].onclick = function(){
alert(window.sessionStorage.getItem("name" ));
};
aInput[2].onclick = function(){
window.sessionStorage.removeItem("name" );
};
}
</script><input><input><input><br><input>
localStorage的应用
html>
<meta>
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//localStorage : 永久性存储
window.localStorage.setItem("name", aInput[3].value);
window.localStorage.setItem("name2", 'aaaaa');
};
aInput[1].onclick = function(){
alert( window.localStorage.getItem( "name" ) );
alert( window.localStorage.getItem( "name2" ) );
};
aInput[2].onclick = function(){
window.localStorage.removeItem("name");
// window.localStorage.clear();
};
}
</script><input><input><input><br><input>
html>
<meta>
<title></title>
<script>
window.onload = function () {
var aInput = document.getElementsByTagName("input");
var oT = document.querySelector("textarea");
if (window.localStorage.getItem("userName")) {
aInput[0].value = window.localStorage.getItem("userName");
}
for (var i = 0; i < aInput.length; i++) {
if (window.localStorage.getItem('sex') == aInput[i].value) {
aInput[i].checked = true;
}
}
if (window.localStorage.getItem("note")) {
oT.value = window.localStorage.getItem("note");
}
window.onunload = function () {
if (aInput[0].value) {
window.localStorage.setItem("userName", aInput[0].value);
}
for (var i = 0; i < aInput.length; i++) {
if (aInput[i].checked == true) {
window.localStorage.setItem('sex', aInput[i].value);
}
}
if (oT.value) {
window.localStorage.setItem('note', oT.value);
}
}
}
</script><p>
用户名: <input></p>
<p>
性别: <br>
<input>男
<input>女
</p>
<p>
备注:
<textarea></textarea></p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
