如何将数据缓存到前端

本文介绍了前端数据缓存的三种常见方案:使用localstorage和sessionstorage进行键值对存储,利用webSql创建前端数据库(仅Google支持),以及运用indexedDB实现大规模数据存储。针对不同数据量需求,作者推荐了适用的缓存方法,并提供了相关代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端数据缓存方案

参考文献: 前端数据库
最近工作上,有需求需要接触到将数据缓存到前端,研究了一番,在此记录,话不多说,直接进入正题:
一、使用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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值