这货是啥?
- Web Storage又称网页数据存储;
- 当我们在制作网页时会希望记录一些信息,例如常见的用户登陆状态,计数器或- 者小游戏,但是又不希望用到数据库,就可以利用Web Storage技术将数据春存储到在用户浏览器中;
- 是一种将少量数据存储在客户端磁盘的技术,通过JS操作;
- 个人理解为cookie作用方面的加强版;
与cookie的异同点
- 存储大小:cookie---4KB;
WebStorage---1MB~5MB; - 安全性: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">«</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">»</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的数据,结果正确读写;
这就引发了我对内部存储数据的思考,起初猜测内部数据类似于一个伪数组进行存储的,但是通过尝试,通过相同的下标索引出的值每次是不一样的,这里只记录情况,后期学完数据结构会再次勘测;
希望本文对您有所帮助