1、localStorage：本地存储
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。属性是只读的。localStorage 只支持 string 类型的存储，这里要特别说明一下 localStorage 的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的 localStorage。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function change() {
var time=new Date().getTime();
// 本地存储设置 键值对
localStorage.setItem(time.toLocaleString(),txt.value);
// 打印存储的长度
console.log(localStorage.length);
show()
}
function show() {
// 拼接table标签
var result="<table border='1'>";
for(var i=0;i<localStorage.length;i++){
// 拼接tr、td标签. 通过localStorage.key(index)取key，localStorage.getItem(key)取值
result+="<tr><td>"+localStorage.key(i)+"</td><td>"+localStorage.getItem(localStorage.key(i))+"</td></tr>";
}
result+="</table>";
div1.innerHTML=result;
}
function del() {
var c=localStorage.length;
for (var i=0;i<c;i++){
//localStorage.removeItem(key) 删除一个元素
localStorage.removeItem(localStorage.key(i));
console.log(i);
}
// 清空数据库，不删除表结构
// localStorage.clear();
div1.innerHTML="";
}
</script>
</head>
<body>
<textarea id="txt" cols="100" rows="30"></textarea><br><br>
<input type="button" onclick="change()" value="添加">
<input type="button" onclick="del()" value="删除">
<div id="div1"></div>
</body>
</html>（2）、小项目-----获取用户信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function save() {
// 创建一个json对象
var data=new Object();
data.name=uname.value;
data.email=uemail.value;
data.tel=utel.value;
data.memo=umemo.value;
// json对象转化成json字符串
var str=JSON.stringify(data);
// 按照用户名存
localStorage.setItem(uname.value,str);
}
function find() {
// 将查找的用户信息解析
var data=JSON.parse(localStorage.getItem(findu.value));
var result ="姓名:"+data.name+"<br>"+"Email:"+data.email+"<br>"+"电话号码:"+data.tel+"<br>"+"备注:"+data.memo;
msg.innerHTML=result;
}
</script>
</head>
<body>
<h1>用户信息卡</h1>
<table>
<tr><td>姓名</td><td><input type="text" id="uname"></td></tr>
<tr><td>Email</td><td><input type="text" id="uemail"></td></tr>
<tr><td>电话号码</td><td><input type="text" id="utel"></td></tr>
<tr><td>备注</td><td><input type="text" id="umemo"></td></tr>
<tr><td><input type="button" value="保存" onclick="save()"></td></tr>
</table>
<hr/>
<p>查询：<input id="findu">
<input type="button" value="按姓名查询" onclick="find()">
<p id="msg"></p>
</body>
</html>※：前端获取到值后用Json字符串打包给后台，后台拿到解析，进行设置。
2、Web Sql
- openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
- executeSql：这个方法用于执行实际的 SQL 查询。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 创建一个数据库(数据库名，版本号，描述数据库，大小，回调方法[都没括号]，最好写上)
var db=openDatabase("student","1.0","学生表",1024*1024,success);
function success() {
alert("创建成功");
}
function fault() {
alert("创建失败");
}
function select1() {
db.transaction(function (tx) {
// tx.executeSql("create table stu(id,name,age);",[]);
// 执行sql语句
tx.executeSql("insert into stu(id,name,age) values(?,?,?);",[2,"vn",18]);
var result = "";
// 成功后返回一个rs结果集
tx.executeSql("select * from stu;", [], function (tx, rs) {
// rs.rows.length 获取返回结果的行数的长度
for (var i = 0; i < rs.rows.length; i++) {
// rs.rows.item(index).name 通过index获取当前元素
result += rs.rows.item(i).name+"<br>";
}
div1.innerHTML = result;
})
});
}
function upd() {
db.transaction(function (tx) {
// ?代表占位符 ，后面[按顺序写参数]，后面跟成功后的方法
tx.executeSql("update stu set id=? where name=?",[3,"vn"],alert("ok"));
});
}
function del() {
db.transaction(function (tx) {
tx.executeSql("delete from stu where id=?",[3],alert("ok"));
})
}
</script>
</head>
<body>
<input type="button" value="查询" onclick="select1()">
<input type="button" value="update" onclick="upd()">
<input type="button" value="del" onclick="del()">
<div id="div1"></div>
</body>
</html>一个web_sql的小项目：https://download.csdn.net/download/weixin_41678001/10801007