前端数据存储

已于 2022-09-23 10:13:36 修改
阅读量425 收藏
点赞数
分类专栏： WEB前端 文章标签： 前端 javascript vue.js 前端数据存储
于 2022-09-23 10:10:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44773109/article/details/127005283
版权

记录一些前端数据存储的方法！


目录结构


JS文件

把一些常用数据（json对象、字符串等）保存在js文件中，通过script标签引入使用。


创建

创建js文件


引入

script引入js文件。./代表当前目录，../代表上级目录。


使用

使用js文件中的数据、变量、函数、类等。


扩展

vue-cli开发的项目中，想在.vue文件中导入js文件。笔记见：VUE导入js文件



Storage API

Web Storage 包含如下两种机制：

  • sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在（大小限制通常在 2.5-10M之间）。

案例

localStorage案例，给localStorage设置过期时间。

封装Storage类

封装Storage类，可以保存在单独的js文件中，通过script标签引入使用。

class Storage {
	constructor(key) {
		this.key = 'storage';
	}
	//设置缓存
	setItem(params) {
		let obj = {
			key: '',
			value: '',
			expires: "",
			startTime: new Date().getTime() //记录何时将值存入缓存，毫秒级
		}
		let options = {};
		//将obj和传进来的params合并
		Object.assign(options, obj, params);
		if (options.expires) {
			//如果options.expires设置了的话
			//以options.key为key，options为值放进去
			localStorage.setItem(options.key, JSON.stringify(options));
		} else {
			//如果options.expires没有设置，就判断一下value的类型
			let type = Object.prototype.toString.call(options.value);
			//如果value是对象或者数组对象的类型，就先用JSON.stringify转一下，再存进去
			if (Object.prototype.toString.call(options.value) == '[object Object]') {
				options.value = JSON.stringify(options.value);
			}
			if (Object.prototype.toString.call(options.value) == '[object Array]') {
				options.value = JSON.stringify(options.value);
			}
			localStorage.setItem(options.key, options.value);
		}
	}
	//拿到缓存
	getItem(key) {
		let item = localStorage.getItem(key);
		if (item != null) {
			//先将拿到的试着进行json转为对象的形式
			try {
				item = JSON.parse(item);
			} catch (error) {
				//如果不行就不是json的字符串，就直接返回
				item = item;
			}
			//如果有startTime的值，说明设置了失效时间
			if (item.startTime != null) {
				let date = new Date().getTime();
				//何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
				if (date - item.startTime > item.expires) {
					//缓存过期，清除缓存，返回false
					localStorage.removeItem(key);
					return false;
				} else {
					//缓存未过期，返回值
					return item.value;
				}
			} else {
				//如果没有设置失效时间，直接返回值
				return item;
			}
		} else {
			return null;
		}
	}
	//移出缓存
	removeItem(key) {
		localStorage.removeItem(key);
	}
	//移出全部缓存
	clear() {
		localStorage.clear();
	}
}

使用

保存：

保存：参数可以设置三个，name-作为键key，value-作为值value，expires-过期时间（毫秒）

let storage = new Storage();
storage.setItem({//保存（过期时间没有默认值，不设置则不会过期）
        key:"name",
       	value:"小黑"
    })

获取：

let value = storage.getItem('name');//获取
console.log('大家好，我是',value);

扩展

localStorage有大小的限制（通常在 2.5-10M之间），有大数据量存储需求可以使用插件localForage。

localForage使得离线数据存储在任何浏览器都是一项容易的任务。若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。localForage 的使用方法与localStorage相似很容易上手，可以查看官方文档了解。

默认情况下，localForage 按照以下顺序选择数据仓库的后端驱动：

  1. IndexedDB
  2. WebSQL
  3. localStorage

注意：vue-cli开发的项目中使用，可以查看这篇文档。

应用场景：移动APP开发，数据保存在本地，无大小限制。（表数据也可以使用json格式保存）



前端数据库

前端数据库——WebSQL和IndexedDB

IndexedDB API是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API，请尝试 localForage、dexie.js、PouchDB、idb、idb-keyval、JsStore 或者 lovefield 之类的库，这些库使 IndexedDB 对开发者来说更加友好。

注意：Web SQL兼容性不好，一般使用基于IndexedDB API的第三方库来简化数据存储操作。


案例

WebSQL案例，了解学习即可，Web SQL的兼容性并不是特别理想，仅chrome ，safari，opera 10.5+等浏览器支持。

封装DaoTools工具

封装DaoTools工具（一个json对象），可以保存在单独的js文件中，通过script标签引入使用。

根据需要创建数据库，编写相应的crud函数，也可以直接调用transaction函数使用sql语句进行crud操作。

//前端数据库Web SQL，Web SQL的兼容性并不是特别理想，仅chrome ，safari，opera 10.5+等浏览器支持。
//注意：数据库操作是异步的，需要采用回调函数的方式操作数据库
DaoTools = {
	//数据库操作对象
	db: null,
	//初始化数据库对象
	init: function() {
		if (typeof openDatabase == 'undefined') {
			alert('当前浏览器不支持Web SQL，建议使用Chrome浏览器！');
			return;
		}
		//参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调
		//若不存在则创建
		this.db = openDatabase('myDB', '1.0', '前端数据库，Web SQL', 1024 * 1024 * 10);
		//transaction 数据库的事务函数（在其中使用executeSql函数执行sql。有一个executeSql执行失败都会回滚）
		this.db.transaction(function(tx) {
			//executeSql函数：
			// 第一个参数为sql语句；第二个参数为sql语句中占位符？对应的数据（数组）；第三、四个参数为成功和失败时的回调函数

			//若不存在表userinfo则创建。列名 username，数据类型 TEXT；列名 password，数据类型 TEXT；。。。
			tx.executeSql(
				'CREATE TABLE IF NOT EXISTS userinfo(username TEXT,password TEXT, email TEXT)', []);
			//创建系统变量表（保存键值对key/value）
			tx.executeSql('CREATE TABLE IF NOT EXISTS sysparam(key TEXT,value TEXT)', []);
			//往userinfo表中插入一条数据
			DaoTools.addUser({
				username: 'admin',
				password: '12345',
				email: '1135637451@qq.com'
			});
		});
	},
	//预留transaction接口，用于执行sql。通过DaoTools.transaction()调用
	transaction: function(backCall) {
		DaoTools.db.transaction(backCall);
	},

	/**
	 * 执行sql，增删改查
	 * @param {string} sql sql语句
	 * @param {string[]} params ？占位符对应的数据，数组
	 * @param {requestCallback} hdcall sql执行成功后的回调
	 */
	update: function(sql, params, hdcall) {
		DaoTools.db.transaction(function(tx) {
			tx.executeSql(sql, params,
				function(tx, rs) {
					console.log('sql执行成功!');
					if (hdcall) hdcall();
				},
				function(tx, error) {
					console.error('sql执行失败!\r\n' + error.source + "::" + error.message);
				}
			);
		});
	},

	/**
	 * 获取用户信息
	 * @param {string} username 用户名（账号）
	 * @param {requestCallback} backCall 回调（接收数据）
	 * @return {Object} 用户信息
	 */
	getUserinfo: function(username, backCall) {
		DaoTools.db.transaction(function(tx) {
			//执行查询
			tx.executeSql('SELECT * FROM userinfo WHERE username = ?', [username],
				function(tx, rs) {
					var json = {};
					if (rs.rows.length > 0) {
						json = rs.rows.item(0);
					}
					backCall(json);
				},
				function(tx, error) {
					console.error(error.source + "::" + error.message);
				}
			);
		});
	},

	/**
	 * 新增用户
	 * @param {Object} userData 用户名username、密码password为必填项
	 * @param {requestCallback} backCall 回调
	 * @return {string} errMsg 若用户信息不完整，则会返回错误信息
	 */
	addUser: function(userData, backCall) {
		var errMsg = '';
		//用户名、密码必填
		if (!userData || !userData.username || !userData.password) {
			errMsg = '请完善用户信息！';
			if (backCall) backCall(errMsg);
			return;
		}
		//先查询，用户名不能相同
		DaoTools.getUserinfo(userData.username, data => {
			if (Object.keys(data).length > 0) {
				errMsg = '存在同名用户！';
				if (backCall) backCall(errMsg);
				return;
			}
			DaoTools.db.transaction(function(tx) {
				//新增数据
				tx.executeSql(
					'INSERT INTO userinfo(username,password,email) VALUES(?,?,?)',
					[userData.username, userData.password, userData.email ? userData.email :
						''
					],
					function(tx, rs) {
						console.log(`新增用户${userData.username}成功`);
						if (backCall) backCall();
					},
					function(tx, error) {
						console.error(error.source + "::" + error.message);
					}
				);
			});
		});
	},

	//获取系统常用变量
	getParam: function(key, backCall) {
		DaoTools.db.transaction(function(tx) {
			//执行查询
			tx.executeSql('SELECT * FROM sysparam WHERE key = ?', [key],
				function(tx, rs) {
					var v = '';
					if (rs.rows.length > 0) {
						v = rs.rows.item(0).value;
					}
					backCall(v);
				},
				function(tx, error) {
					console.error(error.source + "::" + error.message);
				}
			);
		});
	},

	//保存系统常用变量
	setParam: function(key, value, backCall) {
		DaoTools.db.transaction(function(tx) {
			//先删除再新增
			tx.executeSql('DELETE FROM sysparam WHERE key = ?', [key]);
			//新增数据
			tx.executeSql('INSERT INTO sysparam(value, key) VALUES(?, ?)', [value, key],
				function(tx, rs) {
					if (backCall) backCall();
					console.log(key + "::" + value)
				},
				function(tx, error) {
					console.error(error.source + "::" + error.message);
				}
			);
		});
	},

	/**
	 * 查询所有数据
	 * @param {string} tableName 表名
	 * @param {requestCallback} backCall 回调（接收数据）
	 * @return {Object[]} 数组
	 */
	queryAll: function(tableName, backCall) {
		DaoTools.db.transaction(function(tx) {
			tx.executeSql(`select * from ${tableName}`, [],
				function(tx, rs) {
					var json = [];
					for (var i = 0; i < rs.rows.length; i++) {
						json[i] = rs.rows.item(i);
					}
					backCall(json);
				},
				function(tx, error) {
					console.error(error.source + "::" + error.message);
				}
			);
		});
	},

	/**
	 * 通用查询数据，支持分页
	 * @param {string} sql sql语句
	 * @param {string[]} params ？占位符对应的数据，数组
	 * @param {requestCallback} backCall 回调（接收数据）
	 * @param {string} pageSize 页面大小（一页的数据量）
	 * @param {string} pageIndex 页码（从1开始）
	 * @return {Object[]} 数组
	 */
	query: function(sql, params, backCall, pageSize, pageIndex) {
		DaoTools.db.transaction(function(tx) {
			//传入的页序号是从1开始的，需要-1
			if (pageSize && pageIndex) {
				sql = sql + ' limit ' + pageSize + ' offset ' + pageSize * (pageIndex - 1);
				pageIndex = pageIndex - 1;
			}
			console.log(`sql = ${sql}`);

			if (!params) params = [];

			tx.executeSql(sql, params,
				function(tx, rs) {
					var json = [];
					for (var i = 0; i < rs.rows.length; i++) {
						json[i] = rs.rows.item(i);
					}
					backCall(json);
				},
				function(tx, error) {
					console.error(error.source + "::" + error.message);
				}
			);
		});
	},

	/**
	 * 清除数据库信息，初始化
	 */
	clear: function() {
		var me = this,
			cnt = 0;
		var cb = function() { //重新创建表对象
			cnt++;
			if (cnt == 2) { //确保两张表都删掉了，再初始化
				me.init();
				alert('初始化成功！');
			}
		};

		this.db.transaction(function(tx) {
			tx.executeSql('DROP TABLE userinfo', [], cb);
			tx.executeSql('DROP TABLE sysparam', [], cb);
		});
	},
};

//初始化（匿名函数，立即执行）
//script标签引入该js文件后，就会初始化数据库
(function() {
	DaoTools.init();
})();

使用

DaoTools是一个json对象，直接DaoTools.queryAll方式调用其中封装的函数即可。

DaoTools.queryAll('userinfo',data=>{
	console.log(`userinfo表的数据 = \r\n ${JSON.stringify(data)}`);
	// userinfo表的数据 = 
	//  [{"username":"admin","password":"12345","email":"1135637451@qq.com"}]
})

DaoTools.getUserinfo('admin',data=>{
	console.log(`用户admin的信息 = \r\n ${JSON.stringify(data)}`);
	// 用户admin的信息 = 
	//  {"username":"admin","password":"12345","email":"1135637451@qq.com"}
})

扩展

Web SQL的兼容性并不是特别理想，归咎其原因，主要是因为 Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范，它引入了一套使用 SQL 操作客户端数据库的 API。其规范已经被停止更新了，所以大多数浏览器并不支持。
Web SQL相对于 sessionStorage ,locationStorage最大的**优势 ：**能方便的进行对象存储、能进行大量的数据的处理。


总结

  • 主要用于PC端的web 应用，想使用sql语句进行数据crud操作，可以使用Web SQL
  • 页面传递参数、状态记录等小数据量场景，可以考虑Storage API
  • 不是上边的应用场景，建议使用插件localForage

原文链接：前端数据存储

轻率的保罗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端session存储数据
11-10
javascriptSession用户session共享页面数据，适合于单页面应用程序开发
Java 实现Redis存储复杂json格式数据并返回给前端
10-15
在Java Web开发中，利用Redis作为缓存...通过上述方式，Java开发者可以有效地将复杂JSON数据存储在Redis中，提高数据处理效率，并及时响应前端请求。在实际项目中，还需要根据业务需求和系统性能进行适当的优化和调整。
前端存储数据
weixin_53877433的博客
06-14 2417
前端常用的存储数据的方式有2种： 本地存储 Vuex容器 一、本地存储：
前端学数据库之存储
weixin_34418883的博客
11-19 111
前面的话 　　我们经常会对数据表进行插入、删除、更新及查找的工作，即我们常说的CURD。其实，当我们输入命令时，mysql引擎会按照下图进行操作 　　如果我们省略了分析和编译的环节，那么执行效率将大大提高。这就需要下面介绍的存储来实现   存储过程 　　存储过程是SQL语句和控制语句的预编译集合，以一个名称存储并作为一个单元处理。存储过程存储在数据库内，可以由应用程序调用执行，允许用...
JS-前端数据存储
u012632105的博客
01-05 180
JS-前端数据存储 - 星星眼 - 博客园
jquery通过cookie和localStorage实现前端数据交互源码.rar
01-27
本资源"jquery通过cookie和localStorage实现前端数据交互源码.rar"提供了一种利用jQuery库与浏览器的Cookie和localStorage进行数据存储和交换的方法。这里我们将深入探讨这两个技术以及它们在实际应用中的作用。 ...
web 前端数据采集埋点 .zip
01-04
在IT行业中，Web前端数据采集埋点是一种关键的技术实践，用于收集用户在网站或应用程序上的行为数据。这种技术主要用于大数据分析、用户行为追踪、产品优化和业务决策支持。本资源包"web前端数据采集埋点.zip"包含了...
SpringMVC后端返回数据到前端代码示例
08-19
SpringMVC框架，后端开发人员能够方便地将数据发送到前端，以便在网页上展示或进行交互。...这两种方式都是SpringMVC中处理后端到前端数据传输的重要组成部分，开发者应根据实际需求选择合适的方法。
前端之存储数据方法
weixin_53105591的博客
01-29 691
前端数据存储方法
前端数据存储方式
冲鸭^
08-28 4009
Cookie cookie 用于存储web页面的用户信息。 cookie 是一些数据，存储在你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。 当用户访问web页面时，他的名字记录在cookie中。 在用户下一次访问该页面时，可以再cookie中读取用户的访问记录。 Cookie...
sessionStorage，localStorage，cookie，web前端开发数据存储
feiyu_may的博客
07-13 582
    在前端开发中需要存储一些数据，在其他页面进行使用。主要涉及到sessionStorage，localStorage，cookie这三种方式。    cookie会在浏览器请求头或者ajax请求头中发送cookie内容，比如我们把用户名密码存储在cookie中，以后每次打开页面，浏览器发送的请求中带有用户密码信息，就可以实现自动登录了。Cookie用来做用户和权限的识别与鉴定。Cookie是...
前端存储方案
最新发布
m0_59345890的博客
03-11 882
这三个浏览器兼容性最高的三种前端储存方案。
前端的几种数据存储方式
m0_63574519的博客
05-25 4205
一、cookie cookie由名称（一个唯一确定cookie的名称）、值（储存在cookie中的字符串值）、域（cookie对于哪个域是有效的）、路径（指定域中的指定路径）、失效时间（cookie何时应该被删除的时间）和安全标志（指定后，cookie只有在使用SSL连接时才发送到服务器）构成。 cookie保存在客户端，存储量小受到限制（所有cookie的累加长度限制在4KB，超长会被忽略），设置过期时间自动删除，前后端自动同步。 cookie用法： void setMaxAge(int expi
有关前端存储方式的总结
LLL3189860667的博客
09-01 320
亲爱的小伙伴，关于前端存储，你所了解到的知识点有多少呢？下边我就来分享一下自己对前端存储的理解和学习经验吧，希望能够对当前的你有所帮助哟！总的来说，前端存储方式就包括了cookie和webStorage，webStorage又分为了sessionStorage（会话存储）和localStorage(本地存储)。下边主要以javascript对前端存储相关操作进行演示。...
前端开发中常用的存储方法（带解析）
我们好像在哪见过
07-13 2466
前端存储是指在浏览器端存储数据的方法。以下是一些常见的前端存储方法及其详细介绍和解析：
前端大存储大量的数据，indexedDB浏览器端的数据的使用
全易
11-17 470
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。. 该 API 使用索引实现对数据的高性能搜索。. 虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。 而 IndexedDB 提供了这种场景的解决方案。
前端存储数据方式以及区别
03-26
3. IndexedDB：一种基于键值对的NoSQL数据存储方式，可以存储大量的结构化数据，支持事务操作。 4. File API：可以在前端创建、读取、写入和删除文件，适用于存储大量的非结构化数据。 5. Service Worker Caches：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值