前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5缓存

H5缓存

作者头像
天天_哥
发布2018-09-29 14:09:54
1.1K0
发布2018-09-29 14:09:54
举报
文章被收录于专栏:天天
1.sessionStorage
代码语言:javascript
复制
<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>
2.localStorage
代码语言:javascript
复制
<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>
sessionStorage/localStorage都拥有setItem,getItem,removeItem,clear等方法
3.localStorage使用案例
代码语言:javascript
复制
<!--//-------------------------------------->
<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>
<!--在页面刷新时,同样能得到刷新前的用户操作(页面和刷新前时一样的)-->
<!--//------------------------------------>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.11.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.sessionStorage
  • 2.localStorage
    • sessionStorage/localStorage都拥有setItem,getItem,removeItem,clear等方法
    • 3.localStorage使用案例
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档