前端数据缓存实践：localstorage、webSql与indexedDB-优快云博客

本文链接：https://blog.youkuaiyun.com/ITsmallchen/article/details/109398588

本文介绍了前端数据缓存的三种常见方案：使用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