Database CRUD JS Class

Developer
Hugo Giraudel
Size
4,236 Kb
Views
20,240
  1. Database CRUD JS Class Previews
  2. Database CRUD JS Class HTML Codes
  3. Database CRUD JS Class CSS Codes
  4. Database CRUD JS Class JS Codes

How do I make an database crud js class?

Better version at: http://codepen.io/HugoGiraudel/pen/afxki.. What is a database crud js class? How do you make a database crud js class? This script and codes were developed by Hugo Giraudel on 19 November 2022, Saturday.

Database CRUD JS Class Previews
IQ Test

Database CRUD JS Class - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Database CRUD JS Class</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 1em;
}
code { background: #EFEFEF; padding: 0 .25em;
}
pre { background: #EFEFEF; padding: .5em .5em .5em 1em; border-left: .5em solid deepskyblue; text-shadow: 0 1px rgba(255, 255, 255, 0.5); line-height: 1.4;
}
pre code { background: none; border: none; padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2>A CRUD JavaScript class with localStorage persistance</h2>
<p><strong>BETTER VERSION AT: <a href="https://codepen.io/HugoGiraudel/pen/afxki">https://codepen.io/HugoGiraudel/pen/afxki</a></strong></p>
<p>Any comment welcome!</p>
<h3>Instanciating a new database</h3>
<pre><code>var db = new Database({ name: &#39;MyDatabase&#39;, uniqueKey: &#39;id&#39;
})
var obj = { &#39;id&#39;: &#39;1337&#39;, &#39;name&#39;: &#39;John Doe&#39;, &#39;email&#39;: &#39;[email protected]&#39;
}
</code></pre>
<h3>Inserting a new entry</h3>
<pre><code>db.insert(obj)
</code></pre>
<h3>Retrieving an entry</h3>
<pre><code>db.find(1337)
</code></pre>
<h3>Selecting all entries</h3>
<pre><code>db.findAll()
db.findAll(3) // 3 first
</code></pre>
<h3>Updating an entry</h3>
<pre><code>obj[&#39;age&#39;] = 42
db.update(obj)
</code></pre>
<h3>Deleting an entry</h3>
<pre><code>db.delete(obj) // whole object
db.delete(1337) // unique key
</code></pre>
<h3>Dropping database</h3>
<pre><code>db.drop()
</code></pre> <script src="js/index.js"></script>
</body>
</html>

Database CRUD JS Class - Script Codes CSS Codes

body { padding: 1em;
}
code { background: #EFEFEF; padding: 0 .25em;
}
pre { background: #EFEFEF; padding: .5em .5em .5em 1em; border-left: .5em solid deepskyblue; text-shadow: 0 1px rgba(255, 255, 255, 0.5); line-height: 1.4;
}
pre code { background: none; border: none; padding: 0;
}

Database CRUD JS Class - Script Codes JS Codes

(function(exports) { 'use strict'; // Vanilla JS equivalent to $.extend exports.extend = function( obj, extObj ) { var a, i; obj = obj || {}; if (arguments.length > 2) { for (a = 1; a < arguments.length; a++) { exports.extend(obj, arguments[a]); } } else { for (i in extObj) { obj[i] = extObj[i]; } } return obj; }; // Constructor var Database = function ( conf ) { this.conf = exports.extend({ name: 'database', uniqueKey: 'id' }, conf || {}); this.initialize(); }; // Initialization Database.prototype.initialize = function () { this.hasLocalStorage = typeof exports.localStorage !== "undefined"; this.data = this.load() || []; }; // Selecting an entry from its unique key Database.prototype.find = function ( key ) { var entry, i, len; for(i = 0, len = this.data.length; i < len; i++) { entry = this.data[i]; if(entry[this.conf.uniqueKey] == key) { return entry; } } return null; }; // Selecting all entries (with optional limit) Database.prototype.findAll = function ( limit ) { return (typeof limit === "undefined") ? this.data : this.data.slice(0, limit); }; // Inserting a new entry // Creates a unique key if doesn't exist Database.prototype.insert = function ( obj ) { if(!(this.conf.uniqueKey in obj)) { obj[this.conf.uniqueKey] = new Date().valueOf(); } if(this.find(obj[this.conf.uniqueKey]) === null) { this.data.push(obj); this.persist(); } else { throw "Unique key `" + obj[this.conf.uniqueKey] + "` already exists in database, insert has failed."; } return obj; }; // Updating an entry Database.prototype.update = function ( obj ) { var property, entry = this.find(obj[this.conf.uniqueKey]); if(entry !== null) { for(property in obj) { if(entry.hasOwnProperty(property)) { entry.property = obj.property; } } this.persist(); } else { throw "No entry found for `" + obj + "`."; } return entry; }; // Deleting and entry // Accepts either the whole object or a unique key Database.prototype.delete = function ( arg ) { var entry = Object.prototype.toString.call(arg) === "[object Object]" ? arg : this.find(arg); if(entry !== null && typeof entry[this.conf.uniqueKey] !== "undefined") { this.data.splice(this.data.indexOf(entry), 1); this.persist(); return this.find(entry[this.conf.uniqueKey]) === null; } else { throw "No entry found for `" + arg + "`."; } }; // Dropping the base Database.prototype.drop = function () { this.data.length = 0; if(this.hasLocalStorage) { exports.localStorage.removeItem(this.conf.name); } return this; }; // Saving the base to localStorage Database.prototype.persist = function () { if(this.hasLocalStorage) { exports.localStorage.setItem(this.conf.name, JSON.stringify(this.data)); } }; // Loading from localStorage Database.prototype.load = function () { var data = exports.localStorage.getItem(this.conf.name); if(this.hasLocalStorage && typeof data !== "undefined") { return JSON.parse(data); } }; exports.Database = Database;
} (window));
Database CRUD JS Class - Script Codes
Database CRUD JS Class - Script Codes
Home Page Home
Developer Hugo Giraudel
Username HugoGiraudel
Uploaded November 19, 2022
Rating 3.5
Size 4,236 Kb
Views 20,240
Do you need developer help for Database CRUD JS Class?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hugo Giraudel (HugoGiraudel) Script Codes
Name
Batman login form
Demo Flexbox 3
Synchronise background position with padding
Pure CSS button switch
CSS 3 progress bar
Demo Flexbox 2
Sass mixin for scrollbar styling
Off-canvas navigation
Content through Media Queries
Batman loader
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!