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

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);

简要记录下localStorage在项目中的应用之一的相关教程结束。