H5缓存

1.sessionStorage
<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
<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使用案例
<!--//-------------------------------------->
<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>
<!--在页面刷新时,同样能得到刷新前的用户操作(页面和刷新前时一样的)-->
<!--//------------------------------------>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js事件对象相关随记

    天天_哥
  • 图片库

    天天_哥
  • childNodes属性和nodeType属性

    天天_哥
  • JS示例30-列表排序sort

    专注APP开发
  • bootstrap 多级菜单 注册登录

    li class=dropdown a class=dropdown-toggle data-toggle=dropdown ul class=dropdo...

    用户5760343
  • bootstrap bootstrap-dropdown.js

    <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a ...

    用户5760343
  • 筋头云案例

    星辰_大海
  • 一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?

    我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研...

    前端小智@大迁世界
  • 简单的导航栏实现

    为了seo优化,导航栏最好标签语义化。 最符合语义的莫过于ul,li。在采用多级标签时,可采用控制二级标签ul位置的方式来进行显隐。 效果如下: http://...

    欲休
  • python基本数据类型(二)-python

    py3study

扫码关注云+社区

领取腾讯云代金券