1、Web Storage
许多小伙伴在学习前端的时候都有一个想法,自己只能写一些静态的数据,如果想动态加载数据的话,就要学习数据库,例如mysql、Sql Serve、oracle等,光学数据库还不行,还必须掌握一门后端语言,去搭服务,进行前后端的交互。这样学习的时间非常漫长,Web Storage可以存储数据,可以动态调用。利用这个并且不需要服务,直接就可以在前端显示。
- Web Storage 钟的Storage的接口有两种,第一种叫Session Storage,另一种叫Local Storage.
- Session Storage:这种保存的数据是短暂的,在会话结束(浏览器关闭)数据就消失了。
- Local Storage.:这种数据可以一直在本地保存。
- 这里保存数据的格式是key-value的形式。
2、Web Storage的属性
- length:返回保存了多少个key-value键值对。
- key(index):返回storage中第index的键值对的key。
- getItem(key):返回指定key的value。
- set(key,value):存入键值对。
- removeItem(key):删除指定key对应的价值对
- clear():清除所有
3、使用Storage存储、读取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<title>Document</title>
</head>
<body>
<input type="text" id="input"><br>
使用Local Storage保存数据:<input type="checkbox" id="local">
<div id="show"></div>
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('show');">
<script>
var saveStorage = function(id){
var checked = document.getElementById('local').checked;
var storage = checked?localStorage:sessionStorage;
var target = document.getElementById(id);
storage["message"] = target.value
}
var loadStorage = function(id){
var checked = document.getElementById('local').checked;
var storage = checked?localStorage:sessionStorage;
var target = document.getElementById(id);
target.innerHTML = storage["message"];
}
</script>
</body>
</html>
页面
点击保存数据
点击读取数据
4、保存结构化的数据(json数据)
在前后端交互的时候,多数使用的都是json数据。也就是说我们保存的时候是保存的json字符串,读取的时候是读取的json对象。这里就用到了两个函数JSON.parse()将字符串转换成对象,JSON.stringify()将对象转换成字符串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<title>Document</title>
<script>
</script>
</head>
<body>
<form action="">
<input type="text" id="username">
<input type="text" id="userage">
<input type="text" id="usersex">
<input type="submit" onclick="save()">
</form>
<script>
function save(){
var user = {
name:document.getElementById('username').value,
age:document.getElementById('userage').value,
sex:document.getElementById('usersex').value
}
var str = JSON.stringify(user);
var storage = localStorage;
storage['user'] = str;
console.log(str);
}
function read(){
var str = localStorage['user'];
var user = JSON.parse(str);
console.log(user +"\n" + typeof user)
}
</script>
</body>
</html>
5、记事本例子
<body>
<textarea name="" id="msg" cols="50" rows="8">
</textarea><br>
<input type="button" value="添加事件" onclick="addMsg();">
<input type="button" value="清除事件" onclick="clearMsg();">
<hr>
<table style="width: 600px;text-align: center;">
<tr>
<th>事件</th>
<th>添加时间</th>
</tr>
<tbody id="show"></tbody>
</table>
<script>
var loadMsg = function(){
var tb = document.getElementById("show");
tb.innerHTML = "";
for(var i = 0;i < localStorage.length;i++){
var key = localStorage.key(i);
var date = new Date();
var dateStr = date.toLocaleDateString() +" "+date.toLocaleTimeString();
var value = localStorage[key];
var row = tb.insertRow(i);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = dateStr;
}
}
var addMsg = function(){
var msgElement = document.getElementById("msg");
var time = new Date().getTime();
localStorage[time] = msgElement.value;
msgElement.value = "";
alert("数据已经保存");
loadMsg();
}
var clearMsg = function(){
localStorage.clear();
alert("全部事件信息已经删除");
loadMsg();
}
window.onload = loadMsg();
</script>
</body>