国产精品免费嫩草研究院|无遮羞动漫在线观看AV|国产麻豆精品传媒AV国产在线|村在线观看|寂寞情人1正版|韩国床震韩国床震古|精品系列专区久久

  1. 首頁 > 生活 > >

【前端必會】使用indexedDB，降低環境搭建成本

生活百科

背景

  1. 學習前端新框架、新技術 。如果需要做一些數據庫的操作來增加demo的體驗（CURD流程可以讓演示的體驗根據絲滑）
  2. 最開始的時候一個演示程序我們會調用后臺 ， 這樣其實有一點弊端 ， 就是增加了開發和維護成本 ， 簡單的一個demo不應該勞師動眾
  3. 后來我會在demo中使用一些websql ， 奈何 ， websql也真的是沒前景了 。代碼寫起來也不是特別好
  4. 下面來介紹下今天的主角indexedDB和jsStore
介紹
  1. indexedDB可以給瀏覽器本地存儲的能力 ， 并且容量還比較大 。
  2. jsStore只是眾多封裝的indexedDB庫中的一個 ?？梢杂靡环N類似SQL的感覺操作數據
【【前端必會】使用indexedDB，降低環境搭建成本】開始package.json
{"name": "npm1","version": "1.0.0","description": "","main": "index.js","scripts": {"lint": "eslint scripts/**","fix": "eslint scripts/** --fix","serve": "webpack serve"},"dependencies": {"jsstore": "^4.4.4","lodash": "^4.17.21"},"devDependencies": {"css-loader": "^6.7.1","eslint": "^8.23.1","eslint-config-google": "^0.14.0","eslint-config-prettier": "^8.5.0","eslint-plugin-prettier": "^4.2.1","file-loader": "^6.2.0","html-webpack-plugin": "^5.5.0","prettier": "2.7.1","style-loader": "^3.3.1","webpack": "^5.74.0","webpack-cli": "^4.10.0","webpack-dev-server": "^4.11.1"},"author": "","license": "ISC"}webpack配置 ， 添加了devServer配置
//webpack.config.js const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {context: path.resolve(__dirname),devServer: {static: {directory: path.join(__dirname, "dist"),},compress: true,port: 9000,},mode: "production",optimization: {minimize: false,},entry: "./src/main.js",target: ["web", "es5"],output: {clean: true,filename: "bundle.js",path: path.resolve(__dirname, "dist"),},plugins: [new HtmlWebpackPlugin({template: "index.html",}),],module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},],},};jsStore鏈接幫助類 ， 結合webpack+webworker 。安裝了file-loader
//store-connection.js import { Connection } from "jsstore";const getWorkerPath = () => {// return dev build when env is developmentif (process.env.NODE_ENV === "development") {return require("file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.js");} else {// return prod build when env is productionreturn require("file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js");}};const workerPath = getWorkerPath().default;export const connection = new Connection(new Worker(workerPath));主邏輯
//main.js import { connection } from "./store-connection";async function init() {var dbName = "JsStore_Demo";var tblProduct = {name: "Product",columns: {// Here "Id" is name of columnid: { primaryKey: true, autoIncrement: true },itemName: { notNull: true, dataType: "string" },price: { notNull: true, dataType: "number" },quantity: { notNull: true, dataType: "number" },},};var database = {name: dbName,tables: [tblProduct],};const isDbCreated = await connection.initDb(database);if (isDbCreated === true) {console.log("db created");// here you can prefill database with some data} else {console.log("db opened");}var value = https://www.huyubaike.com/biancheng/{itemName:"Blue Jeans",price: 2000,quantity: 1000,};var insertCount = await connection.insert({into: "Product",values: [value],});console.log(`${insertCount} rows inserted`);// results will be array of objectsvar results = await connection.select({from: "Product",});results.forEach((item) => {console.log(item);});}window.addEventListener("load", function () {console.log(connection);init();});數據已經存進去了
【前端必會】使用indexedDB，降低環境搭建成本

文章插圖
API插入、查詢也沒什么問題

經驗總結擴展閱讀