Can javascript write to database?
Show Steve Alila Posted on Jun 23, 2021 • Updated on Sep 27, 2021 You have probably worked with an SQL database like MySQL. You created your site's frontend, then used a programming language to write the backend code. You can also use JavaScript (Node.js.) to create a server to interact with a database like PostgreSQL or MongoDB. The above setups can be long and tiring for a simple project. The solution is to store data on the client, read, update, and delete it using JavaScript via:
In this guide, we will explore the three typical ways to store data using JavaScript. These are:
We will learn the traits of each storage, how it works, and its disadvantages. To grasp the concepts, we will create a simple to-do application. We shall not use any framework or library. Instead, we shall interact with DOM API, web Storage API, and Preliminaries
HTML We link the stylesheet and script file using the The body has a CSS We display the body's content at the center. Assign the JavaScript We have 3 JavaScript files: static.js for static storage, local.js for Let's interact with the DOM. We start by grabbing the
Enter fullscreen mode Exit fullscreen mode 1. Static StorageThis is the most basic way to store data using JavaScript. All we do is create a variable to hold the data. For example, we could create an array of
Enter fullscreen mode Exit fullscreen mode We run the code inside the window object with
Enter fullscreen mode Exit fullscreen mode We loop through the DisadvantagesWe can add more
2. LocalStorageJavaScript allows us to store data in the browser using local storage API. Here, you can use Both ways have the same structure. The main difference is that How It WorksTo store data use
two parameters as shown.
Enter fullscreen mode Exit fullscreen mode To test the code, clear the console (ctrl + L) and paste the above code with any store name you prefer. You can retrieve the stored data using
Enter fullscreen mode Exit fullscreen mode You can delete the storage object
Enter fullscreen mode Exit fullscreen mode Or clear all storage objects using
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode We first create a variable, We use
Enter fullscreen mode Exit fullscreen mode create
Enter fullscreen mode Exit fullscreen mode as shown below:
Enter fullscreen mode Exit fullscreen mode Finally, we can delete each element in the array
Enter fullscreen mode Exit fullscreen mode Here, don't use We find the specific index of the AdvantageThis time around, the data persists even if we close and reopen the browser. DisadvantageWe cannot store complex data types using 3. IndexedDBWith Since it stores data asynchronously, we can use promises to interact with the database. We would need to download a library such as
We create a The structure of the stores comes from the The database (object) has a method called To simplify the (seemingly) complex database we shall create four functions as follows // connectIDB() // addTodos() // getTodos() // deleteTodos() First, we create a global instance of the database since we shall use it in few places in the following functions.
Enter fullscreen mode Exit fullscreen mode Next, we connect to the
Enter fullscreen mode Exit fullscreen mode Let's open version 1 of the Here, we talk about versions because we can upgrade the database if we change its structure. Next, we run three events on the database instance. First, we check if the database opened exists or create it using the Next, we define an object with keypath and We want to store content (from the form), as we shall define when saving the actual form data. The data is NOT unique because we can allow the database to save another record with the same name. Secondly, if there is an error as we try to open the database, we run the error event and log the error on the console. Lastly, on success, we store the result property of the database in the Before getting the //addTodos()
Enter fullscreen mode Exit fullscreen mode First, we prevent the form from its default behavior of refreshing the page for each submit using Next, we create a If the request is successful, we clear the form in readiness for the following form input. Once the transaction has been completed in the database, we can read the data. If we fail to complete the transaction, we run an error event and stop further code execution. //getTodos() We run a while loop to remove the existing Using the From
here, we can decide to delete the list using the delete function tied to each
Enter fullscreen mode Exit fullscreen mode //deleteTodos() Like
Enter fullscreen mode Exit fullscreen mode And voila! We have made a simple update to Remember, you can store images, videos, and photos in DisadvantageThe
main weakness of Conclusion This article aims to give you an overview of ways you can use JavaScript to store data on the client side. You can read more about each method and apply it according to your need. Can JavaScript be used with database?It is very efficient and optimized for server side programming. However if you want to use it in client/browser then it has to depend on some server side scripting to link to database like Jave or C# or PHP. Tariq, I agree with Nauman that nowadays you can use javascript to connect to a database.
Can you write SQL in JavaScript?Write SQL in JS is not safe, but for develop stage is OK, the trick is before deploy, extract SQL from front-end to back-end.
How can add data in database using JavaScript?Create a js file named "insertall" in DBexample folder and put the following data into it:. var mysql = require('mysql');. var con = mysql. createConnection({. host: "localhost",. user: "root",. password: "12345",. database: "javatpoint". con. connect(function(err) {. Can JavaScript interact with SQL?There is no common way to connect to SQL Server database from JavaScript client, every browser has it's own API and packages to connect to SQL Server.
|