Emulate Database in Client HTML/Javascript code ??

Emulating database feel in the client HTML/Javascript code is a good option if you want to quickly prototype something while working with your product owners. You can build pages with forms and submit that data from page to page and emulate the concept of saving the data and that data can be used in other pages. This can be all handled within plain HTML files and Javascript code without server-side code.

To achieve this, the following needs to be done:

• Set up Javascript objects and do some initial loading from some Javascript variables as strings of JSON. 
• While you are loading these Javascript objects from default JSON string variables (using JSON.Parse method) that are set in the head of your page, you also need to save that information into cookies. The cookies would also need to be updated as you are adding/changing data on your prototype pages.
• If the data exists in cookies, your page-load could be loading the information from the cookies and that's how you maintain the data and emulate the concept of database without having any server-side code.

Let me comment more on how you would save that information into cookies. The size of this data would cross the limits of cookie sizes. Every time you decide to save your Javascript object into cookies, you can do the following:

• Using JSON.stringify method convert your Javascript object into a string
• Then you need to encode this string variable using encodeURI function
• Then you need to split your encoded string into smaller pieces and create cookies with a specific naming convention and sequence.
• When you need to load this information from the cookies, you need to load all the cookies following the chosen naming convention and load them into your Javascript object. Don't forget to decode it before JSON.Parse function.

Here is the example. You can refresh the page and close the browser and it will still maintain the updates you made as it is using a collection of cookies to emulate database.

http://almirscorner.blogspot.com/p/emulate.html

- almirsCorner.com -

#html5 #javascript #coding #programming #code #programmer #softwaredevelopment #webdeveloper #database #almirsCorner