简单说明
(1)在存储用户数据的时候,因为cookie可以存储的数据比较小才4KB左右,所以也可以考虑使用sessionStorage来存储,大小限制为2M左右
(2)该技术和localStorage是h5推出的,因此在使用的时候,需要考虑到兼容性的问题
(3)相关资料:http://www.w3school.com.cn/html5/html_5_webstorage.asp
(4)简单介绍和使用:
001 sessionStorage:会话存储技术(session-会话)
002 该技术和cookie一样,一样浏览器退出了,那么保存的数据就会
003 演示sessionStorage技术的相关操作
添加|获取|更新|删除|清空
示例代码
<input type="text">
<button class="btn1">添加</button>
<button class="btn2">获取</button>
<button class="btn3">更新</button>
<button class="btn4">删除</button>
<button class="btn5">清空</button>
<script>
window.sessionStorage.setItem("age","18");
window.sessionStorage.setItem("color","red");
window.sessionStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//添加操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//获取操作
console.log(window.sessionStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//删除操作
window.sessionStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.sessionStorage.clear();
};
</script>