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

其他 2020-07-27 10:21:17 阅读次数: 0

这货是啥？

  • 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）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网站后台管理系统</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/main.css" type="text/css">
</head>
<body>
    <!-- 页头 -->
    <div class="header">
        <nav class="navbar navbar-default" role="navigation">
             <div class="contanier">
                 <div class="navbar-header">
                     <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                     <!-- 设置标题 -->
                     <a href="javascript:void(0)" class="navbar-brand">后台管理系统</a>
                 </div>
                 <div class="collapse navbar-collapse color">
                     <ul class="nav navbar-nav">
                         <li><a href="javascript:void(0)"><span class="glyphicon glyphicon-home"></span>后台首页</a></li>
                         <li><a href="javascript:void(0)"><span class="glyphicon glyphicon-user"></span>用户管理</a></li>
                         <li class="active"><a href="javascript:void(0)"><span class="glyphicon glyphicon-list-alt"></span>内容管理</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
                         <!-- 设置管理员信息，退出按钮 -->
                         <li class="dropdown">                     
                            <a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              admin
                              <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> 前台首页</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 个人主页</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 个人设置</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span> 账户中心</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-heart"></span> 我的收藏</a></li>
                            </ul>
                        </li>
                         <li id="exit"><a href=" "><span class="glyphicon glyphicon-off"></span>退出</a></li>
                     </ul>
                 </div>
             </div>
        </nav>
    </div>
    <div class="container">
        <div class="row">
            <!-- 左侧目录 -->
            <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                <div class="list-group">
                    <a href="#" class="list-group-item active style_1">内容管理</a>
                    <a href="#" class="list-group-item style_2">添加内容</a>
                </div>
            </div>
            <!-- 右侧主要内容 -->
            <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
                <div class="panel panel-default">
                    <div id="panel-heading" class="panel-heading">
                        <!-- 标题，选项 -->
                        <h1>内容管理</h1>
                        <ul class="nav nav-tabs">
                            <li class="active" id="mange-content1">
                                <a href="#mange-content" data-toggle="tab" aria-expanded="false" id="12">内容管理</a>
                            </li>
                            <li id="add-content1" class="">
                                <a href="#add-content" data-toggle="tab" aria-expanded="true" id="21">添加内容</a>
                            </li>
                            <!-- 搜索框 -->
                            <li id="search" class="col-lg-6">
                                    <div class="input-group">
                                      <input id="input2" type="text" class="form-control" placeholder="Search for...">
                                      <span class="input-group-btn">
                                        <button class="btn btn-default" id="button" type="button">查询</button>
                                      </span>
                                    </div><!-- /input-group -->
                            </li id="search">
                        </ul>
                        <div class="tab-content">
            <!-- 内容管理 -->
                            <div class="tab-pane active" id="mange-content">
                                <div id="tabel-a">
                                    <table class="tabel table-hover">
                                        <thead>
                                            <tr>
                                                <th class="col-lg-6">文章标题</th>
                                                <th class="col-lg-3">作者</th>
                                                <th class="col-lg-3">发布时间</th>
                                                <th class="col-lg-2">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbody" class="success">
                                            <tr class="active">
                                                <th scope="row">国内首个汽车汽车资讯互动平台诞生</th>
                                                <td>刘雄安</td>
                                                <td>2017/01/20</td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">操作<span class="caret"></span></button>
                                                        <ul class="dropdown-menu">
                                                            <li>
                                                                <a href="#">编辑</a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:void(0);">删除</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">置顶</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>                                                  
                                        </tbody>
                                    </table>
                                    <nav class="pull-right">
                                        <ul class="pagination">
                                            <li class="disabled"><a href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a></li>
                                            <li class="active">
                                                <a href="#">1</a>
                                            </li>
                                            <li>
                                                <a href="#">2</a>
                                            </li>
                                            <li>
                                                <a href="#">3</a>
                                            </li>
                                            <li>
                                                <a href="#">4</a>
                                            </li>
                                            <li>
                                                <a href="#">5</a>
                                            </li>
                                            <li>
                                                <a href="#">6</a>
                                            </li>
                                            <li>
                                                <a href="#"><span aria-hidden="true">&raquo;</span></a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <!--  -->
                            <div class="tab-pane" id="add-content">
                                <div class="container col-lg-12 second-title">
                                     <h5>标题</h5>
                                    <input id="title" type="text" class="form-control" placeholder="请输入你的标题名称" value="" aria-describedby="basic-addon1">
                                    <h5>作者</h5>
                                    <input id="author" type="text" class="form-control" placeholder="请输入作者姓名" value="" aria-describedby="basic-addon1">
                                    <h5>发布时间</h5>
                                    <input id="time" type="text" class="form-control" placeholder="请输入文章的发布时间" value="" aria-describedby="basic-addon1">
                                    <h5>文章内容</h5>
                                    <div class="form-group"><textarea class="form-control" rows="13"
                                        placeholder="请输入文章正文部分" required=""></textarea></div>
                                        <button id="butt" class="btn btn-primary pull-right">发布文章</button>
                               </div>
                            </div>
                        </div>
                    </div>
  <!-- 文章主体部分 -->
                    <div class="panel-body">
                    </div>
                </div>
            </div>
        </div>
    
    </div>
    <footer style=" position: absolute;height: 50px;text-align: center;line-height: 50px;width: 100%;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright:人世间最美的相遇是遇见第二个自己</p>
                </div>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="../jquery/jqurey.js"></script>
</body>
</html>
  • 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<len;i++){
            var key = storage.key(i);
            var value = storage.getItem(key);
            var artical_obj = JSON.parse(value);
            $('#tbody').append(function(){
                return "<tr id='"+artical_obj.$author+"' class='active clear'><th scope='row'>"+artical_obj.$title+"</th><td>"+artical_obj.$author+"</td><td>"+artical_obj.$time+"</td><td><div class='dropdown'><button type='button' class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>操作<span class='caret'></span></button><ul class='dropdown-menu'><li class='edit'><a href='#add-content'>编辑</a></li><li class='delete1'><a href='javascript:void(0);'>删除</a></li><li><a href=''>置顶</a></li></ul></div></td></tr>";
            });
         }
    }
        // 点击上传后伴随的事件
    $('#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 "<tr id='"+artical_obj.$author+"' class='active clear'><th scope='row'>"+artical_obj.$title+"</th><td>"+artical_obj.$author+"</td><td>"+artical_obj.$time+"</td><td><div class='dropdown'><button type='button' class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>操作<span class='caret'></span></button><ul class='dropdown-menu'><li class='edit'><a href='#add-content'>编辑</a></li><li class='delete1'><a href='javascript:void(0);'>删除</a></li><li><a href=''>置顶</a></li></ul></div></td></tr>";
        });
           // 点击清除input数据
           $("#title").val('');
           $("#author").val('');
           $("#time").val('');
           alert("您已经成功发布文章")
        }
    });
    })
});

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

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

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

希望本文对您有所帮助

猜你喜欢

转载自blog.csdn.net/whatareyougoo/article/details/104048577
今日推荐
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
Spring Boot 3.0：未来企业应用开发的基石
Java 的 AI 前景光明
国内首个智能体生态大会！2024百度万象大会定档5月30日
开源一周年，青语言新版发布
深入浅出：大型语言模型（LLM）的全面解读
顶会ICLR2024论文Time-LLM：基于大语言模型的时间序列预测
周排行
学习笔记(01):Python入门教程-计算机如何区分数字和字符
命令行提示符_颜色
五步轻松搞定Linux下的文件同步(备份)
Visio 2010，如何打开多个窗口
西安新起点|MBA考研十大热门城市
BiSeNet: Bilateral Segmentation Network for Real-time Semantic Segmentation
【蓝桥杯】ADV-73 数组输出
[DeeplearningAI笔记]卷积神经网络4.11一维和三维卷积
Java 逻辑运算符
Python爬虫入门——2. 5 利用正则表达式爬取豆瓣电影 Top 250
每日归档
更多
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)
2024-05-23(9)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022