{Carrer web log} ←
Using JavaScript Objects for storing data
Wednesday, September 14, 2011 { 2 Comments }
Few weeks ago I made "o - JS Library for Object Manipulation" and the next step was to build simple To Do app. The purpose this app was storing data into JavaScript object.Why storing data into JS Objects?
Here are few motives:
- JavaScript objects have JSON like (key,value) structure that is perfect for storing data. You can store numbers, strings, arrays, other objects inside the Object value.
- Parsing the JavaScript Object is very fast in the new browsers.
- With JavaScript you can easily add, remove, extend and do other useful operation to the Object.
- The Object can be easily converted to JSON and vice versa.
- Via AJAX(AJAJ) you can send and receive JSON calls from the server.
- Native node.js support.
- Easy NoSql integration.
- Easy integration with the browser localStorage.
- We can change the browser application building logic by showing first the results to the user and then sending the data to the server(database). That will improve the User Experience and save some traffic because we will be sending/receiving just the JSON data of the actual change. Naturally this will bring new concerns like security, data synchronization and potential data loss.
I think we are not fully using the new browsers JavaScript engines. We can explore new ways and do the heavy lifting in the browser using the server just like permanent data storage.
Here is my simple To Do App that is using "o -library" for the object manipulation and jQuery for the DOM.The data are written only in the JS Object (for now). I used guid/uuid to generate random JavaScript object keys. I wrote a render function that will "render" all the values in the object. It is no so smart to render all the object values for any change made in the object but I'm doing it for purpose of this demo.
This technique is not new, with this post I don't want to reinventing the wheel just to simply point out the advantages of using Objects like data containers. I think many web application can use this approach that can save some serious web traffic.
To Do Link
The object will have this kind of structure:
var Obj = {
89fa0b75-ccc3-7491-df08-906088052575: "Buy milk",
3989d3db-40a5-5c58-4147-42a3cead4c94: "Make 30 Push Ups",
bc0e002e-09a7-d36b-ec6a-24462ea9486a: "Buy ice cream"
}
What do you think? I love to here your opinion.
2 Responses to “Using JavaScript Objects for storing data”
- // Steven Bradley // 9/15/2011
- // Vladimir // 9/15/2011
<< Home
About Me <<<
Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...
My projects <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- o - JS Library for Object Manipulation
- Few words about CSS LINT
- Foxy - CSS Framework
- Multiple object extend pattern in JavaScript
- Object Auto Documentation - JavaScript
- HTML Lorem Ipsum Crash Test
- Write modern CSS - use class
- Event Delegation - JavaScript
- Baseline Grid patterns for Photoshop and CSS
- picoCSS - really small JavaScript Framework
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License