Last Updated: February 25, 2016
·
1.16K
· vinitcool76

Meet ldb.js, better way to deal with HTML5 localStorage

ldb.js

HTML5 LocalStorage provides nice key-value storage for data.This small utility abstracts the process and
take care of some edge cases.


var db = new Ldb();

data = {
   "about": "Just Do It.\nwww.nike.com",
   "category": "Product/service",
   "category_list": [
      {
         "id": "2201",
         "name": "Product/Service"
      }
   ],
   "checkins": 631,
   "founded": "1972",
   "general_info": "Nike, Inc.:\n1-800-344-6453\n7 a.m. - 4 p.m. PT, Monday-Friday\n\nNike+ Support:\nhttp://nikeplus.nike.com/plus/support/\n1-800-379-6453\n5 a.m. - 10 p.m. PT, 7 days a week\n\nOnline Shopping Help:\n1-800-806-6453\n4 a.m. - 11 a.m., 7 days a week",
   "is_published": true,
   "location": {
      "street": "1 Bowerman Drive",
      "city": "Beaverton",
      "state": "OR",
      "country": "United States",
      "zip": "97005",
      "latitude": 45.507207,
      "longitude": -122.828402
   },
   "talking_about_count": 52525,
   "username": "nike",
   "website": "http://nike.com",
   "were_here_count": 9133,
   "id": "15087023444",
   "name": "Nike",
   "link": "http://www.facebook.com/nike",
   "likes": 16067637,
   "cover": {
      "cover_id": "10151647887303445",
      "source": "http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/s720x720/539069_10151647887303445_1841310459_n.png",
      "offset_y": 0,
      "offset_x": 0
   }
};

// First check if your browser has localStorage support
db.check(); 
// Save the JSON data into localStorage
db.set('key', data); 
// Access the data in the application. The following method returns the Object.
db.get('key');
// Remove the data having key as key, checks for keys with no data.
db.remove('key'); 

Installation and Use:

You can download the latest stable code via bower or npm:
With npm you can download with:

npm install ldb or bower install ldb.js

I have also included polyfill.js for enabling localStorage in browsers
where there is no support.

<script type="text/javascript" src="polyfill.js"></script>
<script type="text/javascript" src="ldb.js"></script>

Here is the link for repo: https://github.com/vinitkumar/ldb.js

3 Responses
Add your response

I'm not sure if I quite understand this. How is it better (except for the check() method, which I understand) that just using the localStorage object w/ JSON?

EDIT: Funny enough, I wrote something similar a long time ago: https://github.com/Poincare/ShinyCar

over 1 year ago ·

Well, It abstracts a steps that you will normally do while using localStorage in your app. And gives you the option of just dealing with storage and retrieval of objects. It's very bare bones at this stage and I am going to add more features in coming time.

If you take a look at the code, you might understand the steps it saves you using barebones localStorage. Also, it is a more DRYer approach as you won't be doing same thing again and again.

over 1 year ago ·

Checked your repo, What's up with the weird name and indentation?

Though it does quite the same stuff as one that I wrote. Except that my project also has polyfill that provides localStorage to the browser that don't have support of it yet.

over 1 year ago ·