前端数据缓存方案
参考文献: 前端数据库
最近工作上,有需求需要接触到将数据缓存到前端,研究了一番,在此记录,话不多说,直接进入正题:
一、使用localstorage或者sessionstorage实现缓存
1、先了解一下这是什么东西,打开浏览器,F12—Application,可以查看。
2、两者区别:
- localstorage和sessionstorage一般存储以键值对的形式存在。localstorage则是持久化在本地,只要你不主动删除,一直存在,sessionstorage则是以当前会话为期限,当前会话结束,数据自然清除,例如你关掉浏览器重新打开,数据就不见了。
- 值得关注的是两者的存储大小都是5M,超出限制,浏览器就报错了,所以缓存数据时要谨慎。
3、如何存储和取出数据?
值得注意的是一般都配合JSON.stringify()、JSON.parse()一起使用,localStorage和sessionStorage使用方法一致,这里介绍sessionStorage
存储: window.sessionStorage.setItem(key,value);
取出: window.sessionStorage.getItem(key);
代码如下:
<script type="text/javascript">
$(function () {
$.get("/user/findAll",function (data) {
//存储前将其他数据清除
sessionStorage.clear();
//将数据存入到前端缓存sessionStorage
window.sessionStorage.setItem("users",JSON.stringify(data));
});
});
function getData() {
//从sessionStorage取出数据
var userList = window.sessionStorage.getItem("users");
userList = JSON.parse(userList);
console.log(userList);
}
</script>
<body>
<input type="button" value="get data from sessionStorage" onclick="getData()">
看看效果图:
单击button取出数据:
二、将数据存储到webSql,当然这个目前只有Google支持。IE和火狐均不支持。
1、同样,先来个初识,F12同样可以查看,相当于前端的数据库,最大内存支持25M,要注意的是页面刷新数据库就消失了。
2、使用Api来完成对数据库的增、删、改、查。sql语句与后端操作数据库的一致。
核心Api包括:
创建数据库: openDatabase(dbName,version,description,db size,callback)
参数介绍: 数据库名称、数据版本、描述、数据库大小、创建成功回调(可省略)
打开事务: transaction(callback,success callback,error callback)
参数介绍: 三个都是回调,一般使用第一个足矣
执行sql: executeSql(sql,arguments,success callback,error callback)
参数介绍: sql语句、参数、成功回调、错误回调
完整代码:
要注意的是执行sql的方法(executeSql)必须放在事务(transaction)的回调里面执行。请仔细品下面代码,我把对数据库的每种操作抽出到单个方法内:
function testWebSql() {
//dbName、version、description、db size、callback
let db = openDatabase("db1", "1.0", "save data", 20 * 1024 * 1024);
create();
add();
update();
query();
remove();
//创建数据库
function create() {
let sql = "create table if not exists log(id primary,msg)";
//callback、success callback、error callback
db.transaction(function (ts) {
//create table
//sql、argument、success callback、error callback
ts.executeSql(sql, [],
(transaction, resultSet) => {
console.log("success")
},
(transaction