Local database is a new feature of html5. Html5 provides a browser-side database support, allowing developers to create a local database on the browser side directly through the JS API, and supports standard SQL CRUD operations, making offline web applications more convenient to store structured data. .
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
Although Html5 has provided powerful localStorage and sessionStorage, both of them can only provide data for storing simple data structures, and are powerless for complex web application data. What’s incredible is that Html5 provides a database support on the browser side, allowing us to create a local database on the browser side directly through the JS API, and supports standard SQL CRUD operations, making offline web applications more convenient to store structures. ized data. Next, we will introduce the relevant APIs and usage of local data.
The most basic steps to operate a local database are:
- The first step: openDatabase method: Create an object to access the database.
- Step 2: Use the database access object created in the first step to execute the transaction method. Through this method, you can set an event response method to start the transaction successfully. In the event response method, you can execute SQL.
- Step 3: Execute the query through the executeSql method. Of course, the query can be: CRUD.
Next, we will introduce the parameters and usage of the relevant methods.
(1) openDatabase method:
//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });The openDatabase method opens an existing database. If the database does not exist, it can also create a database. The meanings of several parameters are:
- 1, database name.
- 2. The version number of the database. Currently, 1.0 is enough. Of course, you don’t need to fill it in;
- 3. The description of the database.
- 4, set the size of the allocated database (unit is kb).
- 5, callback function (can be omitted).
- Create the database when calling for the first time, and then establish the connection.
(2) The db.transaction method can set a callback function. This function can accept a parameter that is the object of the transaction we started. Then the Sql script can be executed through this object, which can be combined with the following steps.
(3) Execute the query through the executeSql method.
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
Parameter description:
- qlQuery: SQL statement that needs to be executed specifically, which can be create, select, update, delete;
- value1,value2..] : An array of all parameters used in the sql statement. In the executeSql method, first replace the parameters to be used in the s> statement with "?", and then form an array of these parameters and place them in the second parameter.
- ataHandler: The callback function called when the execution is successful, through which the query result set can be obtained;
- 4, errorHandler: The callback function called when the execution fails;
The following It is a comprehensive example, you can take a look:
<head>
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
function initDatabase() {
var db = getCurrentDb();//初始化数据库
if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
db.transaction(function (trans) {//启动一个事务，并设置回调函数
//执行创建表的Sql脚本
trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
}, function (trans, message) {//消息的回调函数alert(message);});
}, function (trans, result) {
}, function (trans, message) {
});
}
$(function () {//页面加载完成后绑定页面按钮的点击事件
initDatabase();
$("#btnSave").click(function () {
var txtName = $("#txtName").val();
var txtTitle = $("#txtTitle").val();
var txtWords = $("#txtWords").val();
var db = getCurrentDb();
//执行sql脚本，插入数据
db.transaction(function (trans) {
trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
}, function (ts, message) {
alert(message);
});
});
showAllTheData();
});
});
function getCurrentDb() {
//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
//如果数据库不存在那么创建之
var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
return db;
}
//显示所有数据库中的数据到页面上去
function showAllTheData() {
$("#tblData").empty();
var db = getCurrentDb();
db.transaction(function (trans) {
trans.executeSql("select * from Demo ", [], function (ts, data) {
if (data) {
for (var i = 0; i < data.rows.length; i++) {
appendDataToTable(data.rows.item(i));//获取某行数据的json对象
}
}
}, function (ts, message) {alert(message);var tst = message;});
});
}
function appendDataToTable(data) {//将数据展示到表格里面
//uName,title,words
var txtName = data.uName;
var txtTitle = data.title;
var words = data.words;
var strHtml = "";
strHtml += "<tr>";
strHtml += "<td>"+txtName+"</td>";
strHtml += "<td>" + txtTitle + "</td>";
strHtml += "<td>" + words + "</td>";
strHtml += "</tr>";
$("#tblData").append(strHtml);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="txtName" id="txtName" required/></td>
</tr>
<tr>
<td>标题：</td>
<td><input type="text" name="txtTitle" id="txtTitle" required/></td>
</tr>
<tr>
<td>留言：</td>
<td><input type="text" name="txtWords" id="txtWords" required/></td>
</tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<hr/>
<input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
<table id="tblData">
</table>
</body>
</html>The execution effect is as shown in the figure:
Related recommendations: "html video Tutorial》
The above is the detailed content of Is local database a new feature of HTML5?. For more information, please follow other related articles on the PHP Chinese website!
Advanced React Patterns: Compound Components and Render PropsJul 24, 2025 am 03:52 AMUse the composite component mode to build a collaborative UI, such as Select and its subcomponents share state through Context; 2. Use the rendering attribute mode to share non-visual logic, such as MouseTracker to pass data through function attributes; 3. Select according to the scene: Use composite components when structured layout is required, and use rendering attributes when logic is required to be reused flexibly; 4. The two can be used in combination to take into account both structure and flexibility. The ultimate goal is to design a more maintainable and user-friendly API. There is no universal solution, but both are powerful and practical design patterns in React.
Building a Type-Safe Application with TypeScript and ReactJul 24, 2025 am 03:51 AMStartwithaTypeScript-enabledReactsetupusingtoolslikeViteorNext.js.2.Defineexplicittypesforcomponentpropsusinginterfacesinsteadofany.3.UseTypeScriptwithuseStateanduseReducerfortype-safestatemanagement.4.ValidateAPIresponsesatruntimewithZodorsimilartoo
React Error Boundaries for Production ApplicationsJul 24, 2025 am 03:51 AMErrorBoundaries is a component in React that handles runtime errors. It can catch child component errors and display the backup UI. Its core purpose is to prevent component errors from crashing the entire application, and to display friendly prompts and reporting error messages in production environments. ErrorBoundaries catches errors by implementing two lifecycle methods: staticgetDerivedStateFromError() and componentDidCatch(). It should be noted that they do not catch event processing, asynchronous code, server-side rendering, and errors thrown by themselves. It is recommended to place it at critical levels such as page level, module level and third-party component periphery to limit errors
A Deep Dive into Web Workers for Offloading Main Thread TasksJul 24, 2025 am 03:49 AMWebWorkers solves the problem of main thread blocking, keeping the UI smooth by moving time-consuming tasks to the background thread to run; 2. Applicable to data processing, mathematical calculations, long loops, AI inference and other tasks that take more than 16ms; 3. Use postMessage to communicate, data is copied by default (note performance overhead), and can be optimized with TransferableObjects; 4. Beware of abuse, mistakenly thinking about shared memory, and forgetting to call terminate() to clean up resources.
Deploying Vue Applications to ProductionJul 24, 2025 am 03:42 AMThe core points of deploying Vue applications to production environments are: construction optimization, static resource processing, and server configuration. 1. Use vitebuild or vue-cli-servicebuild to package the code to ensure that compression, splitting and path processing are correct; 2. Handle static resources and routing modes, the history mode requires server configuration to fall back to index.html, and hash mode does not require configuration; 3. When deploying to different platforms, please note that GitHubPages needs to set the base path. Vercel and Netlify support history mode and can be configured to achieve redirection; 4. Pay attention to the distinction between environment variables, unified use of resource paths, and enable CDN and Gzip.
Next.js App Router vs. Pages Router: A Detailed ComparisonJul 24, 2025 am 03:41 AMNew projects recommend using AppRouter because it supports nested routing, layout inheritance and modern data flow; 2. AppRouter default server component, which can directly awaitfetch to simplify data acquisition; 3. PagesRouter structure is simple and suitable for small projects, but AppRouter reduces duplicate code through layout.js and loading.js; 4. Both support SSR/SSG, but AppRouter combines Suspense to achieve better streaming rendering; 5. The official makes it clear that AppRouter is the future direction, and old projects can be gradually migrated.
GraphQL Subscriptions for Real-Time DataJul 24, 2025 am 03:19 AMGraphQLSubscriptions realizes real-time data updates through WebSocket, which is suitable for chat, notification and other scenarios. The steps are: 1. Use the WebSocket transmission protocol; 2. Define the Subscription type and resolver on the server; 3. The client initiates the subscription request. Common uses include real-time messages, user status changes, dashboard updates, and collaborative editing. Notes include: high resource occupancy, need to deal with reconnection, compatibility issues, permission control and optimization strategies such as frequency limit or combined with Redis.
Understanding the Role of Bundlers in FrontendJul 24, 2025 am 03:09 AMBundlers are the core tools in modern front-end development. Its main functions include: 1. Module packaging, packaging modular code such as ESModules into a format that can be run by the browser; 2. Resource processing, unified management and optimization of resources such as JS, CSS, and pictures; 3. Code optimization, realizing compression, TreeShaking, code segmentation and other functions to improve performance; 4. Providing development server and hot update functions to improve development experience. Common tools such as Webpack are suitable for large projects and in-depth customization, Vite is suitable for rapid development in modern browser environments, and Rollup is more suitable for building npm packages or component libraries. Using modular development, introducing third-party libraries, building complex projects or
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Atom editor mac version download
The most popular open source editor
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
