学习vue.js,依赖HTML5的新特性来实现前端模拟数据库的存储,和数据的增删改查。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3{
columns: 200px 3;
column-gap: 60px;
column-rule: 2px outset #321;
font-weight: normal;
}
</style>
</head>
<body>
<h2>HTML5新特性:localStorage的增删改</h2>
<h3>
在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来分析
</h3>
</body>
<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");
}
})()
</script>
</html>