SQL로 IndexedDB를 조작할 수 있는 Sql 웹 프로그램 라이브러리를 사용해 보았습니다
17334 단어 indexedDBJavaScriptWebWorker
개요
SQL로 IndexedDB를 조작하고 싶어서 찾아본 곳이 좋아 보이는 프로그램 라이브러리가 있기 때문에 필기를 합니다.
컨디션
macOS 10.13.6
npm 6.9.0
설치하다.
공식 GiitHub에는 React, Type Script, Webpack, CDN 네 개의 샘플이 놓여 있는데 이번에는 Webpack으로 테스트했다.npm는 가져온 상태입니다.
Webpack 설치
적합한 디렉토리를 만들고 Webpack을 설치합니다.$ mkdir test_sqlweb
$ cd test_sqlweb
$ npm init -y
$ npm i webpack webpack-cli --save-dev
설치 완료 후 웹 페이지.config.미리 js를 만듭니다.
src/sqlweb.js에 코드를 씁니다. 묶인 파일은dist/bundle입니다.js로 출력할 계획이기 때문에 다음과 같이 기재합니다.
webpack.config.jsconst path = require('path');
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src/sqlweb.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "sqlweb.bundle.js"
}
};
Sql웹 설치
SqlWeb은 SQL'바람에 인덱스 DB를 처리하는 JsStore 프로그램 라이브러리의 확장이기 때문에 JsStore와 코드에 사용되는 file-loader를 동시에 설치합니다.
※ 이 글을 쓸 때 JsStore 업데이트가 있었던 것 같은데, 최신 3.0.0 프로그램을 준비했는데 동작이 없어 이전 버전을 설치했습니다.
※ 2019/07/14 추가 최신 버전에서도 동작을 확인했으니 최신 버전은 문제 없을 것 같습니다.$ npm i jsstore sqlweb file-loader --save-dev
동작 확인
코드 생성
위에서 말한 바와 같다.js에 코드를 씁니다.
sqlweb.jsimport * as JsStore from "jsstore";
import * as SqlWeb from 'sqlweb';
// バックグラウンドで動かすためのWeb workerの設定
const workerPath = require("file-loader?name=scripts/jsstore.worker.js!../node_modules/jsstore/dist/jsstore.worker");
const con = new JsStore.Instance(new Worker('dist/'+workerPath));
// SQL Webを使用する宣言
JsStore.useSqlWeb(SqlWeb);
// indexedDBの設定
const dbName = "sample_db";
const tbName = "sample_tb";
// indexedDBの初期化
initJsStore();
function initJsStore(){
con.runSql(`ISDBEXIST ${dbName}`).then((isExist) => {
if (isExist) {
const qry = 'OPENDB ' + dbName;
con.runSql(qry);
} else {
const qry = getDbQuery();
con.runSql(qry);
// 初期データの追加
addData();
}
}).catch(err => {
console.error(err);
})
}
// 初期データの追加
function addData(){
const data = [
{name:'TARO', club:'baseball'},
{name:'JIRO', club:'soccer'},
{name:'SABU', club:'tennis'},
]
data.forEach(val =>{
const qry = `insert into ${tbName} values ({name: '${val.name}', club: '${val.club}'})`;
con.runSql(qry);
})
}
// DBとテーブルの初期化用SQL作成
function getDbQuery() {
const db = `DEFINE DB ${dbName};`;
const tblSampleQry = `
DEFINE TABLE ${tbName}(
id PRIMARYKEY AUTOINCREMENT,
name STRING NOTNULL ,
club STRING NOTNULL
);`;
const dbCreatequery = db + tblSampleQry;
return dbCreatequery;
}
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SqlWeb Test Page</title>
</head>
<body>
<h1>Hello SqlWeb!</h1>
<script src="dist/bundle.js"></script>
</body>
</html>
현황 목록의 구성은 다음과 같다.test_sqlweb
├── dist
│ ├── scripts
│ │ └── jsstore.worker.js
│ └── sqlweb.bundle.js
├── index.html
├── node_modules
| └── ...
├── package-lock.json
├── package.json
├── src
│ └── sqlweb.js
└── webpack.config.js
여기다 적어. 패키지야.다음은 json을 수정하고 명령을 실행합니다.
package.json{
"name": "test_sqlweb",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack",
"start": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"file-loader": "^3.0.1",
"jsstore": "^2.12.0",
"sqlweb": "^1.2.1",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
"dependencies": {}
}
$ npm start
브라우저에서 확인
브라우저에서 index.> 을 열고 개발자 도구로 확인하면 인덱스 DB에 기록된 데이터를 확인할 수 있습니다.
Chrome
Firefox
푹 꺼진 곳
공식 GiitHub에는 React, Type Script, Webpack, CDN 네 개의 샘플이 놓여 있는데 이번에는 Webpack으로 테스트했다.npm는 가져온 상태입니다.
Webpack 설치
적합한 디렉토리를 만들고 Webpack을 설치합니다.
$ mkdir test_sqlweb
$ cd test_sqlweb
$ npm init -y
$ npm i webpack webpack-cli --save-dev
src/sqlweb.js에 코드를 씁니다. 묶인 파일은dist/bundle입니다.js로 출력할 계획이기 때문에 다음과 같이 기재합니다.
webpack.config.js
const path = require('path');
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src/sqlweb.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "sqlweb.bundle.js"
}
};
Sql웹 설치
SqlWeb은 SQL'바람에 인덱스 DB를 처리하는 JsStore 프로그램 라이브러리의 확장이기 때문에 JsStore와 코드에 사용되는 file-loader를 동시에 설치합니다.
※ 이 글을 쓸 때 JsStore 업데이트가 있었던 것 같은데, 최신 3.0.0 프로그램을 준비했는데 동작이 없어 이전 버전을 설치했습니다.
※ 2019/07/14 추가 최신 버전에서도 동작을 확인했으니 최신 버전은 문제 없을 것 같습니다.
$ npm i jsstore sqlweb file-loader --save-dev
동작 확인
코드 생성
위에서 말한 바와 같다.js에 코드를 씁니다.
sqlweb.jsimport * as JsStore from "jsstore";
import * as SqlWeb from 'sqlweb';
// バックグラウンドで動かすためのWeb workerの設定
const workerPath = require("file-loader?name=scripts/jsstore.worker.js!../node_modules/jsstore/dist/jsstore.worker");
const con = new JsStore.Instance(new Worker('dist/'+workerPath));
// SQL Webを使用する宣言
JsStore.useSqlWeb(SqlWeb);
// indexedDBの設定
const dbName = "sample_db";
const tbName = "sample_tb";
// indexedDBの初期化
initJsStore();
function initJsStore(){
con.runSql(`ISDBEXIST ${dbName}`).then((isExist) => {
if (isExist) {
const qry = 'OPENDB ' + dbName;
con.runSql(qry);
} else {
const qry = getDbQuery();
con.runSql(qry);
// 初期データの追加
addData();
}
}).catch(err => {
console.error(err);
})
}
// 初期データの追加
function addData(){
const data = [
{name:'TARO', club:'baseball'},
{name:'JIRO', club:'soccer'},
{name:'SABU', club:'tennis'},
]
data.forEach(val =>{
const qry = `insert into ${tbName} values ({name: '${val.name}', club: '${val.club}'})`;
con.runSql(qry);
})
}
// DBとテーブルの初期化用SQL作成
function getDbQuery() {
const db = `DEFINE DB ${dbName};`;
const tblSampleQry = `
DEFINE TABLE ${tbName}(
id PRIMARYKEY AUTOINCREMENT,
name STRING NOTNULL ,
club STRING NOTNULL
);`;
const dbCreatequery = db + tblSampleQry;
return dbCreatequery;
}
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SqlWeb Test Page</title>
</head>
<body>
<h1>Hello SqlWeb!</h1>
<script src="dist/bundle.js"></script>
</body>
</html>
현황 목록의 구성은 다음과 같다.test_sqlweb
├── dist
│ ├── scripts
│ │ └── jsstore.worker.js
│ └── sqlweb.bundle.js
├── index.html
├── node_modules
| └── ...
├── package-lock.json
├── package.json
├── src
│ └── sqlweb.js
└── webpack.config.js
여기다 적어. 패키지야.다음은 json을 수정하고 명령을 실행합니다.
package.json{
"name": "test_sqlweb",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack",
"start": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"file-loader": "^3.0.1",
"jsstore": "^2.12.0",
"sqlweb": "^1.2.1",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
"dependencies": {}
}
$ npm start
브라우저에서 확인
브라우저에서 index.> 을 열고 개발자 도구로 확인하면 인덱스 DB에 기록된 데이터를 확인할 수 있습니다.
Chrome
Firefox
푹 꺼진 곳
import * as JsStore from "jsstore";
import * as SqlWeb from 'sqlweb';
// バックグラウンドで動かすためのWeb workerの設定
const workerPath = require("file-loader?name=scripts/jsstore.worker.js!../node_modules/jsstore/dist/jsstore.worker");
const con = new JsStore.Instance(new Worker('dist/'+workerPath));
// SQL Webを使用する宣言
JsStore.useSqlWeb(SqlWeb);
// indexedDBの設定
const dbName = "sample_db";
const tbName = "sample_tb";
// indexedDBの初期化
initJsStore();
function initJsStore(){
con.runSql(`ISDBEXIST ${dbName}`).then((isExist) => {
if (isExist) {
const qry = 'OPENDB ' + dbName;
con.runSql(qry);
} else {
const qry = getDbQuery();
con.runSql(qry);
// 初期データの追加
addData();
}
}).catch(err => {
console.error(err);
})
}
// 初期データの追加
function addData(){
const data = [
{name:'TARO', club:'baseball'},
{name:'JIRO', club:'soccer'},
{name:'SABU', club:'tennis'},
]
data.forEach(val =>{
const qry = `insert into ${tbName} values ({name: '${val.name}', club: '${val.club}'})`;
con.runSql(qry);
})
}
// DBとテーブルの初期化用SQL作成
function getDbQuery() {
const db = `DEFINE DB ${dbName};`;
const tblSampleQry = `
DEFINE TABLE ${tbName}(
id PRIMARYKEY AUTOINCREMENT,
name STRING NOTNULL ,
club STRING NOTNULL
);`;
const dbCreatequery = db + tblSampleQry;
return dbCreatequery;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SqlWeb Test Page</title>
</head>
<body>
<h1>Hello SqlWeb!</h1>
<script src="dist/bundle.js"></script>
</body>
</html>
test_sqlweb
├── dist
│ ├── scripts
│ │ └── jsstore.worker.js
│ └── sqlweb.bundle.js
├── index.html
├── node_modules
| └── ...
├── package-lock.json
├── package.json
├── src
│ └── sqlweb.js
└── webpack.config.js
{
"name": "test_sqlweb",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack",
"start": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"file-loader": "^3.0.1",
"jsstore": "^2.12.0",
"sqlweb": "^1.2.1",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
"dependencies": {}
}
$ npm start
크롬이면 오타문도 출력하지 않고 Firefox면 이 오타가 된다.워크맨 파일의 경로가 그 해결을 수정하는 데서 벗어났기 때문입니다
크롬에서 index.열 때 발생한 오류입니다.Firefox에서 오류가 발생하지 않습니다.Chrome에 부팅 옵션을 추가하여 해결합니다.
Access to the Indexed Database API is denied in this context
Mac로 Google Chrome에서 시작 옵션을 설정하는 방법
아마도 이 웹워커의 패스 지정 방법에도 문제가 있을 것 같지만, 현재 상황은 조사를 끝내지 못했다.JsStore 버전을 낮추어 해결합니다
감상
로컬에 저장할 수 있는 데이터를 SQL로 처리하고 싶어서 찾다가 Sqlweb을 발견했습니다.SQL로 NoSQL의 IndexedDB를 조작할 수 있다는 점이 좋다.그러나 SQL 글에는 일부 취미(CREATE DB는 DEFINE DB, insert 시 수치 지정법 등)가 있어 공들여 잘 활용해야 한다는 인상을 준다.
또 Sqlweb의 동작을 확인하기 위해 폼에 걸린 SQL을 직접 수행하는 페이지를 제작해 붙여야 한다.
https://github.com/ryu022304/sqlweb-test
사이트 축소판 그림
Reference
이 문제에 관하여(SQL로 IndexedDB를 조작할 수 있는 Sql 웹 프로그램 라이브러리를 사용해 보았습니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryu022304/items/fc24bf8ee55266cfd02b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
