简要记录下localStorage在项目中的应用之一

Posted 2020-10-02 Beyrl.pan

localStorage作为html5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中.
localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动，数据仍然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。

一、放入和取出：
下面介绍一个实际项目中的情况，
　　比如说有一个编辑页面，叫他页面A，都是可编辑，可更改的信息，如下图：
　　

 

 　　比如说一个人之前保存了这个信息，现在，他有些信息想更改。就打开了这个编辑页面，原有保存的信息会展示出来，当然，这个不是用localstorage做的，现在是，要求这个人的名字不能和其他的人重复，所以，正常的思路是 ，在姓名 onblur 的时候，走接口，从数据库验证是否有重复的，如果有重复的，就提示已存在。但是现在遇到一个问题就是，如果，这个人进入这个页面，他只是把光标在姓名的input上面点了一下，然后再失焦，前提是他并没有想改名字。但是，当他失焦的时候，会执行onblur，走接口，这样就会弹出已存在。那么该怎么解决呢？我想的解决方法是：

　　一进入编辑页面，就获取到姓名，然后存到localStorage里面，当失焦的时候，先把当前姓名input里面的姓名获取，并和存入localStorage的做对比，如果相同，就不走接口验证，如果不相同，在走接口验证姓名是否重复，若重复再弹出提示已存在，代码如下：

        //页面一进来就把班组课名字存入localstorage
        var name = $(\'inputName\').val(),
　　　　　　　editNameArr = [];
            editNameArr.push(name);
            window.localStorage.setItem(\'editclassArr\',editNameArr);//这里的set是存入的意思，下面的get，是从localstorage中获取的意思，即再取出来。
        var getProSel = window.localStorage.getItem(\'editclassArr\');
            if(window.localStorage.getItem(\'editclassArr\') == null){
                getProSel = [];
            }
            console.log(getProSel);
            //验证是否重名 
            $(\'body\').on(\'blur\',\'.AA\',function(event){
                //console.log(getProSel.indexOf($(this).val()) != -1);//是相同的 
                if(getProSel.indexOf($(this).val()) != -1){//等于-1 是找不到相同的 的意思，不等于-1就是说明找到相同匹配的。
                    $(this).removeClass(\'border-red\');
                }else{var courseName = \'\',
                           self = $(this),
                           valu = self.val();
                     if(valu != \'\'){
                         $.ajax({
                                url: \'\',//接口地址
                               type: \'POST\',//请求类型
                               data:,//参数
                               traditional: true,
                               dataType: "JSON",//数据类型
                               success: function(data){ }
                          });
                     }
                }
           })

　　注意：存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储

 二、localStorage的删除

　　1、清除localStorage的所有内容：

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("b",2);
            console.log(storage);
            storage.clear();
            console.log(storage);

　　2、将localStorage中的某个键值对删除：

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("b",2);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

　　结果2：a=1,b=2                             undefined

三、字符串转换：

　　一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式，

　　这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串。

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:\'xiecanyong\',
                sex:\'man\',
                hobby:\'program\'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

　　读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:\'xiecanyong\',
                sex:\'man\',
                hobby:\'program\'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);