vue.js，依赖HTML5的新特性来实现前端模拟数据库的存储，和数据的增删改查。
HTML5新特性:localStorage的增删改
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
这里我们以localStorage来分析
<script type="text/javascript">
(function(){
/*判断浏览器是否支持该特性*/
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
/*可以简单模拟成前端的数据库，实现增删改查的功能*/
//增，即给全局变量赋值
var storage = window.localStorage;
storage.a = 1;
storage["b"] = 2;
storage.setItem("data","i am jsonData");
//查，取得变量的值
var data = storage.getItem("data");
console.log(data);
//删，移除存储里的值
//storage.clear()清空所有
storage.removeItem("a");
//改，即重新给变量赋值
storage.setItem("b","again data");
}
})()
在代码中的操作
var app;
$(function(){
localStorage.removeItem('listArray');
var listArray = localStorage.getItem('listArray');
listArray = JSON.parse(listArray);
if(!listArray){
listArray = [];
}
console.log(listArray);
app = new Vue({
el: '#body',
data: {
loading:true,
openhtml:false,
success:false,
tanaddmaterial:false,
deltan:false,
cangku:[],
showdata:[],
delid:'',
goodsdata:{
material:[],
kucun:[],
firstgoodsno:1,
sdid:'',
firstggname:'',
guid:'',
ctime:'',
},
selected:'',
name:'',
sdid:'',
mgid:'',
ggname:'',
mgname:'',
goodsno:'',
orderdata:{
ctime:'',
remarks:'',
type:1,
cuid:'',
sstatus:'',
stime:'',
},
currentlist:{},
},
watch: {
selected : function(val, oldVal) {
app.unit();
}
},
methods: {
loadData:function(){
$.post("{:URL('Createstoragelist/selData')}",{listArray:listArray},function(data){
if(listArray.length>0){
app.cangku = data.data.sddata;
app.showdata = data.data.showdata;
app.goodsdata.ctime = data.data.time;
app.goodsdata.material = data.data.mgdata;
app.goodsdata.kucun = data.data.sddata;
app.selected = data.data.mgdata[0].mgid;
app.goodsdata.sdid = data.data.sddata[0].sdid;
app.goodsdata.firstggname = data.data.mgdata[0].rkname;
app.goodsdata.guid = data.data.mgdata[0].guid;
app.name = data.data.name;
app.orderdata.cuid = data.data.cuid;
app.orderdata.ctime = data.data.time;
}else{
app.goodsdata.material = data.data.mgdata;
app.goodsdata.kucun = data.data.sddata;
app.showdata = [];
app.goodsdata.ctime = data.data.time;
app.selected= data.data.mgdata[0].mgid;
app.goodsdata.sdid = data.data.sddata[0].sdid;
app.goodsdata.firstggname = data.data.mgdata[0].rkname;
app.goodsdata.guid = data.data.mgdata[0].guid;
app.name = data.data.name;
app.orderdata.cuid = data.data.cuid;
app.orderdata.ctime = data.data.time;
}
app.loading=false;
},'json');
},
unit: function(){
for(var i in app.goodsdata.material){
if(app.selected == app.goodsdata.material[i]['mgid']){
app.goodsdata.firstggname = app.goodsdata.material[i]['rkname'];
app.goodsdata.guid = app.goodsdata.material[i]['rkguid'];
}
}
},
addmaterial:function(){
app.tanaddmaterial=true;
},
/*setmater:function(e){
app.goodsdata.mgid = e.target.value;
$.post("{:URL('Createstoragelist/changeUnitindex')}",{mgid:app.goodsdata.mgid},function(data){
app.goodsdata.firstggname = data.data.ggname;
app.goodsdata.guid = data.data.guid;
},'json');
},*/
setdepot:function(e){
app.goodsdata.sdid = e.target.value;
},
setdepots:function(e){
this.currentlist.sdid = e.target.value;
},
del:function(mgid){
app.deltan = true;
app.delid = mgid;
},
delf:function(){
app.deltan = false;
},
delo:function(){
var delid = app.delid;
// console.log(delid,"商品id",listArray);
var newList = [];
for(var i = 0;i<listArray.length;i++){
if(listArray[i].mgid != delid){
newList.push(listArray[i]);
}
}
listArray = newList;
// this.showdata = newList;
app.loadData();
// console.log(newList,"删除后的数据");
localStorage.setItem('listArray',JSON.stringify(newList));
app.deltan=false;
},
unconfirm:function(){
app.tanaddmaterial=false;
localStorage.removeItem('listArray');
app.goodsdata.firstgoodsno=1;
},
confirm:function(){
if(app.goodsdata.firstgoodsno<=0){
weui.topTips('入库数量不能为空且不能小于等于0');
}else{
var list = {
"goodsno":app.goodsdata.firstgoodsno,
"mgid":app.selected,
"sdid":app.goodsdata.sdid,
"guid":app.goodsdata.guid,
"ctime":app.goodsdata.ctime
};
listArray.push(list);
localStorage.setItem('listArray',JSON.stringify(listArray));
app.tanaddmaterial=false;
app.goodsdata.firstgoodsno=1;
app.loadData();
console.log(listArray);
}
},
tan:function(item){
console.log(item);
this.currentlist = item;
console.log(this.currentlist,"修改之前的数据");
app.openhtml = true;
},
cancel:function(){
app.openhtml=false;
},
ok:function(){
if(app.currentlist.goodsno<=0){
weui.topTips('入库数量不能为空且不能小于等于0');
}else{
for(var i = 0;i<listArray.length;i++){
if(listArray[i].mgid == this.currentlist.mgid){
listArray[i].sdid = this.currentlist.sdid;
listArray[i].goodsno = this.currentlist.goodsno;
console.log(listArray[i],"修改后的数据");
}
}
localStorage.setItem('listArray',JSON.stringify(listArray));
this.loadData();
app.openhtml=false;
}
},
keepin:function(){
if(app.orderdata.sstatus==''){
app.orderdata.sstatus=0;
}
$.post("{:URL('Createstoragelist/addorderindex')}",{orderdata:app.orderdata,goodsdata:listArray},function(data){
if(data.status == 1){
app.success = true;
localStorage.removeItem('listArray');
}else{
weui.topTips(data.info);
}
},'json');
},
saveShen:function(){
if(app.orderdata.sstatus==''){
app.orderdata.sstatus=1;
}
if(app.orderdata.stime==''){
app.orderdata.stime= app.orderdata.ctime;
}
$.post("{:URL('Createstoragelist/saveadd')}",{orderdata:app.orderdata,goodsdata:listArray},function(data){
// console.log(data);
if(data.status == 1){
app.success = true;
localStorage.removeItem('listArray');
}else{
weui.topTips(data.info);
}
},'json')
}
}
})
app.loadData();
})
