sessionStorage存储

sessionStorage存储

简单说明

    （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>