前端杂七杂八
2017年5月24日

Local Storage存值取值与操作

作者 admin

需求大意就是我想每次登陆成功后，这个通知弹窗会自动弹出来(JS的alert有一定几率会被浏览器拦截，这里存在着问题，会有一些用户看不到)，通过打勾后存储local Storage，之后检测key值是否存在，如果存在，那么这个弹窗将关闭，无法再次打开，如果不存在，那么每次浏览器打开这个窗口时modal弹窗都会弹出，接下来直接上代码。

<div class="container">
<a href="#"><img src="images/banner.jpg" class="img-responsive act" data-toggle="modal"
data-target="#p1"></a>
<div>
<div class="modal fade" id="p1" >

<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>
<center>
<h1>最近通知</h1>
</center>
</div id="btnPanel">
<div class="modal-body">
<!--<img src="images/3.jpg" class="img-responsive img-thumbnail" style="height: 800px;">-->
<div id="#modalay">
<center>
<img src ="images/years.jpg" class="img-responsive" style="margin-bottom: 10px;">
</center>
</div>
     <div class="modal-footer">
  <div id="checkbox">
    <label>
      <input type="checkbox" id="checkBox"> 勾选后下次不再提示！ 
      <button type="button" class="btn btn-primary" data-dismiss="modal" id="save">确&nbsp;&nbsp;定</button>
    </label>
  </div> 
    </div>
</div>
</div>
</div>
</div>

这是html代码(在body里面)，熟悉bootstrap的朋友应该秒懂，之后我们来看JS代码，重头戏来了,

<script>
$(document).ready(function(){
                if(localStorage.readStatus==="1"){
                   //console.log("no");
                   $("#p1").attr('id','p3');
                 }else{
                  $("#p1").modal('show');
                 }
})
$(function () {
        var localMsg;
        if(window.localStorage.formHistory){
            localMsg=JSON.parse(window.localStorage.formHistory);
        }
        $('#checkbox input').click(function () {
            var history=[];
            window.localStorage.formHistory='';
            for(var i=0;i<$('#checkbox input').length;i++){

                localStorage.setItem("readStatus","0");

                localStorage.setItem("readStatus","1");

                if(localStorage.readStatus==="1"){
                   //console.log("no");
                   $("#p1").attr('id','p3');
                 }else{
                   console.log("取值失败或不存在");
               }
            }
            window.localStorage.formHistory=JSON.stringify(history);
        })
    })
</script>

咱们先看第二部分，稍后讲解第一部分。

JSON.parse(window.localStorage.formHistory);

用一个JSON语法的字符串解析为一个对应类型的对象

一个for遍历表单数据，也就是我们的checkbox对勾按钮，

在里面我们设置一个value，如果value的值是1的话，那么我的modal弹窗ID更替，这样就没有办法触发modal 了，反之，则是我们的取值失败，没有这个值的存在，

结尾的JSON.stringify，指的是从一个对象解析出字符串，

比如var a = {a:1,b:2} 结果: JSON.stringify(a) “{“a”:1,”b”:2}”。

第二部分结束了，第二部分告诉了我们一个道理，localstoryage的值是取出来了，可是其余的逻辑呢，又该如何处理？

$(document).ready(function(){
                if(localStorage.readStatus==="1"){
                   //console.log("no");
                   $("#p1").attr('id','p3');
                 }else{
                  $("#p1").modal('show');
                 }
})

文本就绪，检测，我的localstory是否存在，众所周知，localstory只要存储了就不会轻易去除，除非自己删除，不然就会一直存在浏览器里面，好现在我们先运行一下看看是否已经存储成功了

不错不错哦，现在已经出来了，咱们接着聊，既然出来了 那么我开始检测，如果value值等于1，那么我更改ID，使得我下次登入时弹窗无法被打开，同等于无效关闭，接下来如果value值不存在 那么我就直接让modal显示，没毛病，没下次，显示这段代码是官方提供的，很简单。

最后跟大家简单总结一下，由于我本人是搞游戏的，网页有几个月没弄了，这个效果确实是满足了，不过不够优雅，暴力修改更替ID 始终不是什么好办法，如果老哥们有更好的办法希望我们一同进步交流，谢谢大家 ，今天又是代码满满的一天！

标签Html5 localstory

1,858 条评论在 “Local Storage存值取值与操作”

向melbet_xvpl进行回复 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注