H5缓存

<script type="text/javascript">
    var txt = document.querySelector('input');
    var btns = document.querySelectorAll('button');
    //存储数据
    btns[0].onclick=function(){
        sessionStorage.setItem('userName',txt.value);
        sessionStorage.setItem('pwd','123456');
        sessionStorage.setItem('age',18);
    }
    //获取数据
    btns[1].onclick=function(){
        txt.value = sessionStorage.getItem('age');
    }
    //更新数据
    //键值是唯一的
    btns[2].onclick=function(){
        sessionStorage.setItem('userName',txt.value)
    }
    //删除数据
    btns[3].onclick=function(){
        //只是清除指定的值
        sessionStorage.removeItem('userName');
    }
    //清空所有的储存
    btns[4].onclick=function(){
        sessionStorage.clear();
    }
</script>

<script type="text/javascript">
    var txt = document.querySelector('input');
    var btns = document.querySelectorAll('button');
    btns[0].onclick=function(){
        var obj = {'a':1,'b':2};
        //将json数据转换为字符串
        obj = JSON.stringify(obj);
        localStorage.setItem('json',obj);
    }
    btns[1].onclick=function(){
        //将字符串解析为json数据
        var s = JSON.parse(localStorage.getItem('json'));
        txt.value = s.a
    }
</script>

<!--//-------------------------------------->
<div class="box">
    <p>会员中心</p>
    <ul id="service">
        <li class="item">
            <p>首页</p>
            <ul>
                <li>12</li>
                <li>13</li>
                <li>14</li>
            </ul>
        </li>
        <li class="item">
            <p>微信</p>
            <ul>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
            </ul>
        </li>
        <li class="item">
            <p>个人中心</p>
            <ul>
                <li>32</li>
                <li>33</li>
                <li>34</li>
                <li>35</li>
            </ul>
        </li>
        <li class="item">
            <p>商城</p>
            <ul>
                <li>42</li>
                <li>43</li>
                <li>44</li>
                <li>44</li>
            </ul>
        </li>
    </ul>
</div>
<script>
    var list = document.getElementById("service").getElementsByTagName("p");
    var item = document.getElementsByClassName("item");
    var arr = [0,0,0,0];//代表着项目列表的开启状态，0代表收起，1代表展开
    for (var i = 0; i < list.length; i++) {
        list[i].index = i;
        //判断项目列表是展开还是收起状态,能够实现连续点击的切换
        list[i].onclick = function () {
            if(arr[this.index]==0){
                this.nextElementSibling.style.display = "block";
                arr[this.index]=1;
                localStorage.setItem("chioce",JSON.stringify(arr));
            }else if(arr[this.index]==1){
                this.nextElementSibling.style.display = "none";
                arr[this.index]=0;
                localStorage.setItem("chioce",JSON.stringify(arr));
            }
        }
    }

    //判断是否存在，不存在按照arr渲染，因为第一次打开页面的时候，没有localStorage.chioce；
    if(localStorage.chioce){
        chioce =JSON.parse(localStorage.chioce);
        for (var k = 0; k < chioce.length; k++) {
            console.log(chioce[k]);
            if (chioce[k] == 0) {
                item[k].children[1].style.display = "none";
            }else{
                item[k].children[1].style.display = "block";
            }
        }
    }else{
        chioce =arr;
        for (var n = 0; n < chioce.length; n++) {
            console.log(chioce[n]);
            if (chioce[n] == 0) {
                item[n].children[1].style.display = "none";
            }else{
                item[n].children[1].style.display = "block";
            }
        }
    }

</script>
<!--在页面刷新时，同样能得到刷新前的用户操作（页面和刷新前时一样的）-->
<!--//------------------------------------>