I'm a student and I've been tasked with creating a todo application with clientside authentication using IndexedDB.
I'm trying to store account data, but my database attribute keeps setting itself back to null even after working during the onupgradeneeded method. I've been using debuggers and it doesn't actually show my code running the onupgradeneeded method, though it does as it creates the correct stores on Firefox.
Any help will be appreciated!
Many thanks
class DatabaseConnection
{
constructor(name="todoapp", version=1) {
this.name = name;
this.version = version;
this.database = null;
// Normalise IndexedDB by switching versions depending on browser
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// If the browser does not support IndexedDB, do not load
if(!indexedDB) document.write("Your browser does not support IndexedDB. Please try another browser.");
else console.log(`Database [${name}] successfully loaded.`);
/* Instead of using anonymous functions in the constructor, I'm going to use private methods in the class
for organisational and performance purposes */
var request = indexedDB.open(name, version);
request.onerror = this._onerror;
request.onsuccess = this._onsuccess;
request.onupgradeneeded = this._onupgradeneeded;
}
/* Account methods
=================== */
registerAccount() {
console.log(this);
let tx = this.database.transaction(["accounts"], "readwrite");
let account = {
username: "George",
password: "Test"
};
tx.objectStore("accounts").add(account);
}
/* Private methods
=================== */
_onerror(event) {
alert("[ERROR] :: " + event.target.error);
}
_onsuccess(event) {
this.database = event.target.result;
}
_onupgradeneeded(event) {
this.database = event.target.result;
// Defining the data used in the database
this.database.createObjectStore("todos", {
keyPath: "id",
autoIncrement: true
});
this.database.createObjectStore("accounts", {
keyPath: "id",
autoIncrement: true
});
}
}
The callbacks aren't "bound", so they will be called with a different value for this than you are expecting.
If you do console.log(this) from inside your callbacks, you'll see what's going on, and why this.database = ... isn't working as you expect.
Try this:
request.onsuccess = this._onsuccess.bind(this);
request.onupgradeneeded = this._onupgradeneeded.bind(this);
... which turns your function into one that automagically has this set to what you want.
Related
I'm trying to Store some application data using indexedDB
Here is my code
function _getLocalApplicationCache(_, payload) {
const indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.shimIndexedDB;
if (!indexedDB) {
if (__DEV__) {
console.error("IndexedDB could not found in this browser.");
}
}
const request = indexedDB.open("ApplicationCache", 1);
request.onerror = event => {
if (__DEV__) {
console.error("An error occurred with IndexedDB.");
console.error(event);
}
return;
};
request.onupgradeneeded = function () {
const db = request.result;
const store = db.createObjectStore("swimlane", {keyPath: "id", autoIncrement: true});
store.createIndex("keyData", ["name"], {unique: false});
};
request.onsuccess = () => {
// creating the transition
const db = request.result;
const transition = db.transaction("swimlane", "readwrite");
// Reference to our object store that holds the swimlane data;
const store = transition.objectStore("swimlane");
const swimlaneData = store.index("keyData");
payload = JSON.parse(JSON.stringify(payload));
store.put(payload);
const Query = swimlaneData.getAll(["keyData"]);
Query.onsuccess = () => {
if (__DEV__) {
console.log("Application Cache is loaded", Query.result);
}
};
transition.oncomplete = () => {
db.close();
};
};
}
If I do use different version then 1 here --> indexedDB.open("ApplicationCache", 1);
I'm getting a error like they keyPath is already exist. And other than than for version 1 I'm getting this error.
Can someone please help me where i'm doing wrong.
Review the introductory materials on using indexedDB.
If you did something like connect and create a database without a schema, or created an object store without an explicit key path, and then you stored some objects, and then you edited the upgradeneeded callback to specify the keypath, and then never triggered the upgradeneeded callback to run because you continue to use current version number instead of a newer version number, it would be one possible explanation for this error.
The upgradeneeded callback needs to have logic that checks for whether the object stores and indices already exist, and only create them if they do not exist. If the store does not exist, create it and its indices. If the store exists and the indices do not, add indices to the store. If the store exists and the indices exist, do nothing.
You need to trigger the upgradeneeded callback to run after changing your database schema by connecting with a higher version number. If you do not connect with a higher version number, the callback never runs, so you will end up connecting to the older version where your schema changes have not taken place.
function FriendlyChat() {
// statements
}
FriendlyChat.protoype.somemethod = function() {
// statements
};
FriendlyChat.protoype.somemethod2 = function() {
//statements
};
window.onload = function() {
window.friendlyChat = new FriendlyChat();
};
So i noticed the above structure for js while working on a google codelab.
And I have two ques.
in normal objects you have to call the function i.e Object.somemethod()
How does this structure call the methods assigned to it.
From my limited understanding, Firendlychat.protoype.the method treats the
function as an object and the methods are passed to the new object created on
window.onload.Via
inheritance, The object created i.e friendlychat has all these methods.
Yet none of the methods are called in any way. How does this work?
Is there any advantage to structuring your code in this way other than
readability
Note :
Main function
function FriendlyChat() {
this.checkSetup();
// Shortcuts to DOM Elements.
this.messageList = document.getElementById('messages');
this.messageForm = document.getElementById('message-form');
// Saves message on form submit.
this.messageForm.addEventListener('submit', this.saveMessage.bind(this));
this.signOutButton.addEventListener('click', this.signOut.bind(this));
this.signInButton.addEventListener('click', this.signIn.bind(this));
// Toggle for the button.
var buttonTogglingHandler = this.toggleButton.bind(this);
this.messageInput.addEventListener('keyup', buttonTogglingHandler);
this.messageInput.addEventListener('change', buttonTogglingHandler);
// Events for image upload.
this.submitImageButton.addEventListener('click', function(e) {
e.preventDefault();
this.mediaCapture.click();
}.bind(this));
this.mediaCapture.addEventListener('change',
this.saveImageMessage.bind(this));
this.initFirebase();
}
//the methods are setup here
// Sets up shortcuts to Firebase features and initiate firebase auth.
FriendlyChat.prototype.initFirebase = function() {
this.auth = firebase.auth();
this.database = firebase.database();
this.storage = firebase.storage();
// Initiates Firebase auth and listen to auth state changes.
this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};
// Saves a new message on the Firebase DB.
FriendlyChat.prototype.saveMessage = function(e) {
e.preventDefault();
}
};
FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
imgElement.src = imageUri;
};
// Saves a new message containing an image URI in Firebase.
// This first saves the image in Firebase storage.
FriendlyChat.prototype.saveImageMessage = function(event) {
event.preventDefault();
var file = event.target.files[0];
// Clear the selection in the file picker input.
this.imageForm.reset();
// Check if the file is an image.
if (!file.type.match('image.*')) {
var data = {
message: 'You can only share images',
timeout: 2000
};
this.signInSnackbar.MaterialSnackbar.showSnackbar(data);
return;
}
// Check if the user is signed-in
if (this.checkSignedInWithMessage()) {
// TODO(DEVELOPER): Upload image to Firebase storage and add message.
}
};
// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
var provider = new firebase.auth.GoogleAuthProvider();
this.auth.signInWithRedirect(provider);
};
// Signs-out of Friendly Chat.
FriendlyChat.prototype.signOut = function() {
this.auth.signOut();
};
One of the advantages I've seen when using prototype inheritance was that you can control all instances of an object. For ex:
function FriendlyChat() {
this.chatIsActive = true;
}
FriendlyChat.prototype.deactivateChat = function(...rooms) {
for (chatRoom of rooms) {
chatRoom.chatIsActive = false;
}
};
var chat1 = new FriendlyChat();
var chat2 = new FriendlyChat();
var chatController = new FriendlyChat();
chatController.deactivateChat(chat1, chat2)
console.log(chat1.chatIsActive)
In ES6, however, you can do it:
class FriendlyChat {
constructor() {
this.chatIsActive = true;
}
static deactivateChat(...rooms) {
for (let chatRoom of rooms) {
chatRoom.chatIsActive = false;
}
}
}
var chat1 = new FriendlyChat();
var chat2 = new FriendlyChat();
FriendlyChat.deactivateChat(chat1, chat2)
console.log(chat1.chatIsActive)
And the another advantage of using prototype is that you can save memory spaces when you make an object from new keyword. For instance, the code in ES5 above, you can see chat1 and chat2 I've made by using new. Then chat1 and chat2 will be able to access deactivateChat() method which is in a sharing-space. It's because of the concept, called prototype-chaining.
And the next ES6 version is just a syntactic sugar - under the hood it does the same as ES5 version
I post this as a reference to others who have been faced with this dilemma.
First of all, ONe of the core issues for me was migrating from java, I seemed to be familiar territory but things work a bit different in js.I strongly recommend these links:
Objects in Detail
js Prototype
So the key to why this method works is due to the
window.friendlyapp =new friendlychat()
Now normally in most languages you have an object
obj() {
attr : value
method: function() {}
}
And then to use the method you do
var child = new obj();
child.method();
but in this method the var is made an instance of the window object and thats why none of the methods of the app need to be explicitly called.
It appears that the Safari and iPhone web browsers are incapable of allowing the user to create different object stores from separate transactions. This is even the case when the user closes the database, increments the version number and then uses createObjectStore() within the onupgradedneeded callback.
Is there a workaround?
For example, visit http://bl.ocks.org/redgeoff/1dea140c52397d963377 in Safari and you'll get an alert with the "AbortError" when Safari attempts to create the 2nd object store.
For convenience, here is the same snippet of code:
var idb = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB
|| window.msIndexedDB;
// Generate a unique db name as IndexedDB is very delicate and we want our test
// to focus on a new DB
var dbName = 'mydb' + '_' + (new Date()).getTime() + '_'
+ Math.round(1000000*Math.random());
var db = null;
var version = 1;
var open = function (version, onSuccess, onUpgradeNeeded) {
var request = null;
if (version) {
request = idb.open(dbName, version);
} else { // 1st time opening?
request = idb.open(dbName);
}
request.onupgradeneeded = function () {
if (onUpgradeNeeded) {
onUpgradeNeeded(request);
}
};
request.onsuccess = function () {
db = request.result;
if (onSuccess) {
onSuccess(request);
}
};
request.onerror = function () {
console.log('error=', request.error);
alert('error=' + JSON.stringify(request.error));
};
};
var createObjectStore = function (name, callback) {
db.close(); // synchronous
version++; // increment version to trigger onupgradeneeded
open(version, callback, function (request) {
request.result.createObjectStore(name, {
keyPath: 'id'
});
});
};
// NOTE: we could create the first store when opening the DB for the first time, but we'll keep
// things simple and reuse our createObjectStore code for both object stores
open(null, function () {
createObjectStore('store1', function () {
createObjectStore('store2', function () {
console.log('done creating both stores');
});
});
});
I tried using a sleep of 2 secs after the DB is closed and reopened and that doesn't appear to work. If there is no workaround then this essentially means that you cannot use the IndexedDB implementation in Safari to dynamically create object stores, which means that you need to know all your object stores before creating a DB.
Unless I am mistaken and someone has a workaround, the best way to dynamically add object stores is to implement a db-per-object-store design. In other words, you should create a new database whenever you need to create a new object store.
Another good option is to use https://github.com/axemclion/IndexedDBShim to emulate IndexedDB with WebSQL.
I'm working with NodeJS in an attempt to make a basic Socket.IO server for the fun of it and I've ran into an issue that's confusing me to no ends.
Here's my Server code. Fairly short, only one event.
// Create the server and start listening for connections.
var s_ = require('socket.io')(5055);
var Session = require('./Session');
var connections = [];
var dummyID = 0;
// Whenever a connection is received.
s_.on('connection', function(channel) {
connections[channel] = new Session(channel, ++dummyID);;
console.log("Client connected with the ID of " + dummyID);
// Register the disconnect event to the server.
channel.on('disconnect', function() {
delete connections[channel];
console.log("A Client has disconnected.");
});
channel.on('login', function(data) {
if(data.username !== undefined && data.password !== undefined) {
var session = connections[channel];
if(session !== undefined) {
session.prototype.authenticate(data.username, data.password);
}
}
});
});
The error is thrown on this line:
session.prototype.authenticate(data.username, data.password);
Saying that "authenticate" cannot be called on undefined, meaning the prototype of session is undefined. Session itself is not undefined, as per the check above it. Here is Session.js
var Session = function(channel, dummyID) {
this.channel = channel;
this.dummyID = dummyID;
};
Session.prototype = {
authenticate: function(username, password) {
if(username == "admin" && password == "admin") {
this.channel.emit('login', {valid: true});
} else {
this.channel.emit('login', {valid: false});
}
}
};
module.exports = Session;
As you can see the prototype is clearly there, I'm exporting the Session object, and I'm really confused as to what the issue is. Any help would be greatly appreciated.
just call the function you added to the objects prototype
session.authenticate(data.username, data.password);
This article explains the prototype inheritance chain very clearly, especially with the graph.
And one more tip of myself: everything object in javascript has a __proto__ property in the inheritance chain, keep that in mind helps a lot.
In Firefox 17.0.1 when I try to open the IndexedDB database, Firebug console shows me an InvalidStateError exception. Also request.onerror event is raised, but event.target.errorCode is undefined.
if (window.indexedDB) {
var request = window.indexedDB.open('demo', 1);
request.onsuccess = function(event) {
// not raised
};
request.onupgradeneeded = function(event) {
// not raised
};
request.onerror = function(event) {
// raised with InvalidStateError
};
}
Does anyone have experience with IndexedDB in Firefox?
Update
Firefox 18.0.1 has the same behavior. Comlete source.
I answer because the problem still exists (in Firefox 54). This happens if you:
use Firefox in private mode
or switch between different Firefox versions (https://bugzilla.mozilla.org/show_bug.cgi?id=1236557, https://bugzilla.mozilla.org/show_bug.cgi?id=1331103)
To prevent the InvalidStateError a try catch isn't working (but useful for other errors, e.g. disabled cookies), instead you need event.preventDefault(). Yes I know, too easy to be true. :)
if (window.indexedDB) {
var request = window.indexedDB.open('demo', 1);
request.onsuccess = function(event) {
// not raised
};
request.onupgradeneeded = function(event) {
// not raised
};
request.onerror = function(event) {
// raised with no InvalidStateError
if (request.error && request.error.name === 'InvalidStateError') {
event.preventDefault();
}
};
}
Kudos go to https://bugzilla.mozilla.org/show_bug.cgi?id=1331103#c3.
I am pretty sure the error you get is a version error, meaning the current version of the database is higher then the version you are opening the database with. If you take a look in event.target.error you will see that the name will contain "VersionError".
An other possibility is that you will see "AbortError", that would mean that the VERSION_CHANGE transaction was aborted. Meaning there was an error in the onupgradeneeded event that caused an abort. You could get this if you are creating an object store that already exists.
I see no other possibilities than these too, if not provide some more info about the error you get.
You need to create the object store in a separate transaction, you're lumping both the open database and create object store transaction into the same event.
Also you can't have both autoincrement and a path as options to your object store. You have to pick one or the other.
Here's the code that will get your example going:
function initDB() {
if (window.indexedDB) {
var request = window.indexedDB.open('demo', 1);
request.onsuccess = function(event) {
db = event.target.result;
createObjectStore();
};
request.onupgradeneeded = function(event) {
db = event.target.result;
$('#messages').prepend('blah blah<br/>');
};
request.onerror = function(event) {
$('#messages').prepend('Chyba databáze #' + event.target.errorCode + '<br/>');
};
}
}
function createObjectStore() {
db.close();
var request = window.indexedDB.open('demo', 2);
request.onsuccess = function(event) {
db = event.target.result;
showDB();
};
request.onupgradeneeded = function(event) {
db = event.target.result;
$('#messages').prepend('yeah yeah yeah<br/>');
var store = db.createObjectStore('StoreName', { keyPath: 'id' });
store.createIndex('IndexName', 'id', { unique: true });
};
request.onerror = function(event) {
$('#messages').prepend('Chyba databáze #' + event.target.errorCode + '<br/>');
};
}
If you start getting stuck you can take a look at some indexeddb code I wrote for the Firefox addon-sdk. The code is more complicated than what you need but you'll be able to see all the events, errors, and order of transactions that need to happen. https://github.com/clarkbw/indexed-db-storage
Good luck!
FireFox will also throw an "InvalidStateError" when using IndexedDB, if the browser is set to "Do not store history" in the privacy tab of the FireFox settings.
I believe FireFox basically runs in incognito mode when that setting is set.
IndexedDB is not available when running FireFox in private mode.