Web Storage知识点梳理，模拟后台管理系统部分功能

这货是啥？

• Web Storage又称网页数据存储；
• 当我们在制作网页时会希望记录一些信息，例如常见的用户登陆状态，计数器或- 者小游戏，但是又不希望用到数据库，就可以利用Web Storage技术将数据春存储到在用户浏览器中；
• 是一种将少量数据存储在客户端磁盘的技术，通过JS操作；
• 个人理解为cookie作用方面的加强版；

与cookie的异同点

• 存储大小：cookie－－－４KB；
  　　　　　　WebStorage－－－１MB～５MB；
• 安全性：cookie每次处理网页的请求都会连带发送cookie值给服务端，使得安全性降低，而WebStorage纯碎运用于客户端，不会出现这样的问题；
• 都以键值对的形式保存数据；

web Storage两个主体

Web Storage类型	生命周期	有效范围
local Storage	执行删除命令后才会消失	同一网站的网页可以跨窗口和分页
session Storage	浏览器窗口或分页关闭就会消失	仅对当前浏览器窗口或分页有效

常规使用语法

• 检测浏览器是否支持web Storage

if（typeof(Storage)=="underfined"）{
     alert("您的浏览器不支持WebStorage")
}else{
     //local Storage或者session Storage代码
}

• 数据的存储与访问
  访问：getItem();
  具体格式：
  window.localStorage.getItem(key);
  存储：setItem();
  具体格式：window.localStorage.setItem("userdate","Hello!localStorage");
  上述window可以省略不写；
• 数据的删除
  当想要移除某条数据，可以调用removeItem()方法或者delete属性；
  例如:

  window.localStorage.removeItem("userdate");
  delete window.localStorage.userdate;

当你想删除全部数据时，可以使用clear();

localStorage.clear();

以localStorage为基础开发一个具备增删查改的后台管理系统

下面的代码主要实现了后台管理系统的增填数据部分，检查浏览器对web Storage是否支持的情况等（小白练习，只做理解示范）

• HTML部分（依赖bootstrap）

    
    
    
    
    
    


    
    

        

             

                 

                     
                         Toggle navigation
                         
                         
                         
                     
                     
                     后台管理系统
                 
                 

                     

                         
后台首页
                         
用户管理
                         
内容管理
                     
                     

                         
                         
                     
                            
                              admin
                              
                            
                            

                                
 前台首页
                                
 个人主页
                                
 个人设置
                                
 账户中心
                                
 我的收藏
                            
                        
                         
退出
                     
                 
             
        
    
    

        

            
            

                

                    内容管理
                    添加内容
                
            
            
            

                

                    

                        
                        
内容管理
                        

                            

                                内容管理
                            
                            

                                添加内容
                            
                            
                            

                                    

                                      
                                      
                                        查询
                                      
                                    

                            
                        
                        

            
                            

                                

                                    

                                        

                                            

                                                
文章标题
                                                
作者
                                                
发布时间
                                                
操作
                                            
                                        
                                        

                                            

                                                
国内首个汽车汽车资讯互动平台诞生
                                                
刘雄安
                                                
2017/01/20
                                                

                                                    

                                                        操作
                                                        

                                                            

                                                                编辑
                                                            
                                                            

                                                                删除
                                                            
                                                            

                                                                置顶
                                                            
                                                        
                                                    
                                                
                                            
                                                  
                                        
                                    
                                    

                                        

                                            

                                                «
                                            
                                            

                                                1
                                            
                                            

                                                2
                                            
                                            

                                                3
                                            
                                            

                                                4
                                            
                                            

                                                5
                                            
                                            

                                                6
                                            
                                            

                                                »
                                            
                                        
                                    
                                
                            
                            
                            

                                

                                     
标题
                                    
                                    
作者
                                    
                                    
发布时间
                                    
                                    
文章内容
                                    

                                        发布文章
                               
                            
                        
                    
  
                    

                    
                
            
        
    
    
    

        

            

                

                    
Copyright:人世间最美的相遇是遇见第二个自己
                
            
        
    
    
    
    

• jQuery部分：（纯属小白练习，请读者多多指教）

//判断浏览器是否支持webstorage
function onLoad(){
    if(typeof(Storage) == underfined){
        alert("sorry,你的浏览器不支持Web Storage")
    }
}
//样式部分
$(document).ready(function(){
//退出浏览器界面
    $('#exit').on('click',function(){
        if(confirm('你确定关闭页面吗')){
            closewin();
        }else{
            
        }
    })
    function closewin(){
        self.opener=null;
        self.close();
    }
// 文章主体部分样式
    $('#mange-content').css({
        'height':'560px'
    })
    $('#add-content').css({
        'height':'560px'
    })
    $('#tabel-a').css({
        'marginTop':'10px'
    })

// 实现内容管理/添加内容之间样式切换
    $('#mange-content1').click(function(){
        $('.style_1').addClass('active');
        $('.style_2').removeClass('active');
    });
    $('#add-content1').click(function(){
        $('.style_1').removeClass('active');
        $('.style_2').addClass('active');
    });
    $("#search").css({
        "position":"relative",
        "left":"498px",
        "top":"8px",
        "width":"200px"
    })
//实现载入数据
    output();
    function output(){
        var storage = window.localStorage;
        for(var i = 0,len=localStorage.length;i"+artical_obj.$title+""+artical_obj.$author+""+artical_obj.$time+"
操作
编辑
删除
置顶
";
            });
         }
    }
        // 点击上传后伴随的事件
    $('#butt').click(function(){
        //把input信息存储在对象中
        var artical_name = new Object();
        artical_name.$title = ($("#title").val());
        artical_name.$author = ($("#author").val());
        artical_name.$time= ($("#time").val());
         // 判断input为空的时候采取的措施
        if(artical_name.$title.length==0&&artical_name.$author.length==0&&artical_name.$time.length==0){
            alert("请填写作品的相关信息")
        }else if(artical_name.$title.length>12||artical_name.$author.length>12||artical_name.$time.length>12){
            alert("Sorry,您的作品数据字数大于12位，请删减再上传")
        }else if(artical_name.$title.length==0){
            alert("请填写标题名称");
        }else if(artical_name.$time.length==0){
            alert("请填写发布时间");
        }else if(artical_name.$author.length==0){
            alert("请填写作者名称");
        }else{
           //将对象转换为字符串
        var artical_name_string = JSON.stringify(artical_name);
           // 将字符串存储到storage中
        window.localStorage.setItem(artical_name.$author,artical_name_string);
           //通过键值取出对应的值并转为对象
        var storage = window.localStorage;
        var value = storage.getItem(artical_name.$author);
        var artical_obj = JSON.parse(value);
        $('#tbody').append(function(){
            return ""+artical_obj.$title+""+artical_obj.$author+""+artical_obj.$time+"
操作
编辑
删除
置顶
";
        });
           // 点击清除input数据
           $("#title").val('');
           $("#author").val('');
           $("#time").val('');
           alert("您已经成功发布文章")
        }
    });
    })
});

以上代码有很多优化的地方，比如正则表达式的加入，链式使用等等，这里只做新手思想示范练习

对localStorage内部数据存储方式的观摩记录

上文代码快中我通过for循环遍历了local Storage的数据，结果正确读写；
这就引发了我对内部存储数据的思考，起初猜测内部数据类似于一个伪数组进行存储的，但是通过尝试，通过相同的下标索引出的值每次是不一样的，这里只记录情况，后期学完数据结构会再次勘测；

希望本文对您有所帮助