I know there’s something called client-side data storage.  I ‘get’ clientside stuff a lot more than I ‘get’ server-side stuff, and I’d honestly like to keep things local.  That way nobody has to depend on the internet being on in order to access their analogies.

And now that I’ve come up with a good justification for not learning server-side technologies, let’s figure out a local javascript database. 

What are my client-side options?  I could store data in cookies.  I remember cookies from years ago when people were freaking out all over the news about them.  I know that they store information on your browser that a website can then use to do things like say, “Hi, Angelgica McFakeName.  Welcome Back!”  

Hmm.  Cookies can store 4 kilobytes of data. Might be a good place to start, but that’s pretty small. 

Oh, yay!  Let’s take a look at persist JS.  There are ways to store data locally in each browser, but each browser has decicded, once again, to do it in a completely non-cross-browser way.  I sympathize:  there is no standard, and they want a solution that works just for them.

persist JS is a cross-browser library that lets you access the local storage mechanism for each browser.  Yay!

So I download persist js, and reading through the intro, I begin to feel the crawling threads of fear that come from Not Knowing My Ass From My Elbow. 

Let’s take a look at these fears: 

  • is this be best solution?  How the hell am I supposed to know that?  If I knew that, it would be under “Lovely portfolio projects”  or “Things that made me an assload of money in the market.”  It wouldn’t be in this crappile of a blog.
  • Shouldn’t I be learning serverside technology instead?  No, you should be out saving widows and orphans like mother Theresa, or being ten gazillion times more awesome than you already are.  You don’t know server-side, you therefore don’t like serverside, you don’t have a server, you don’t even know how to set up a server, so stop whining and figure out how to use a library that at least you might know how to set up.
  • Setup is HAARRRRRD.   Yeah.  We know.  That’s why you’re going to barf every bleeding moment of it out onto the internet.  get working, kiddo. 

Ok, ok.  I’ve used javascript libraries before.  Let’s download, open it up, and see what happens. 

Oooooh!  Upon opening the file, I discover that there is a test page.  I use the webpage to load some data into storage.  Now I close the web browser.  Now I open the webpage, and click a button that says “load.”  It stayed!  Woohoo!

Dammmit, I’m just starting to get tired.  No, what I need to do is some setup.  I need to load the unzipped library into my dropbox account, and then download it onto my main developing machine and see if it works there.  great.  We’ve got a task.  Let’s go. 

Extracted stuff.  Ok, it’s annoying that I can’t find it on the desktop where I put it.  I should stop using the desktop as my own personal dumping ground…screw it. Javascript!  Focus, folks!  Found the file. Now, we open up the dropbox online dialog and upload persist.js to it

And once again I am reminded that f11 is the fullscreen button. How annoying. 

Hmm.  Can the web interface of dropbox not upload whole folders?  Answer:  Nope

Ok.  Successfully uploaded everything to dropbox. I will now be able to work on it on my ipad, once I return home and charge up my ipad again. Now it is time to work on it here. 

Hmm.  Reading, writing, and arithmatic. 

Shit. I got totally distracted. 

Well, at least the laundry got done.  Anywho, let’s get back to our jabascript. 

Time to open that sucker up.  the html looks simple enough, although I’ve never seen the feelidset tag before. 

Hmm. 

We’ll give the javascript of Test.js a once-over. 

All right, I’ve never seen the syntax get:  function.  I wonder if it works the same as get= function

Oh. Ok.   having the colon after a name is the notation for an object literal.  (literal is like literature.  Hmm.  Actually, it’s the precise words that make up the story.  It isn’t actually the meaning.  So saying ‘object literal,’ is the precise words and syntaxt that make up an object written out. 

In javascript a function is an object, you can define it as an object literal. 

get: function(id) {
    return document.getElementById(id);
  }

like so. 

Umm, actually, this whole giant thing is inside an object called test. I think I have my very first taste of actual object-oriented javascript.  thanks, Pablo! 

So.  Our test object does a couple of things.  it gets, it loads , it saves, and it load2s.  Hmmm. 

Get: wrapper for getElementByID, which gets a branch of the DOM tree based on it’s id, AKA getting an html element based on it’s id. 

Save   save: function() {
    var val = Test.get(‘data’).value;
    Test.store.set(‘some_key’, val);
  },

This gets data from the html input box (test.get(“data”).value;)  and puts it in the store, setting it to a key.  So. local storage works with key-value pairs.  You have to have a unique key to find a unique value. You can think of a key like the key a swiss bank gives you to your safety-deposite box.  the value is what’s inside that box.  Although there are many boxes in the swiss bank, your key will only open one of them.  The save function creates both the key and the box. 

 

  load2: function() {
    Test.store2.get(‘some_key’, function(ok, val) {
      if (ok)
        Test.get(‘data2’).value = val;
    });
  },

Now this load function is a bit stranger.  Why? Arrg.  I wish he hadn’t decided to “optimize” document.getElementByID down to get, because now Test.get and Test.store.get are two completely separate things that look waaaay too similar.  ok.  and what is this function(ok, val) {

}

It must be some sort of check to see if that value exists.  Documentation time! 

So yeah.  The rest of this syntax makes sense except for this function(ok,val) stuff. 

Reddit, what say you? 

Reddit say Here’s the ReadME

Hmm.  I’m reading through the readme and I’m understanding maybe one word in six.  This is not a problem with the readme.  This is a problem with my focus.  So.  Lets take it one chunk at a time. 

 

Once you have saved a value to the store, you can read it back, 
like this:

    // get value from store and prompt user
    store.get('some_key', function(ok, val) {
      if (ok)
        alert('some_key = ' + val);
    });

What's up with the anonymous function?  It turns out that some backends
-- specifically the WHATWG Database (used for Safari 3.1) -- only
function asynchronously, so using a callback function is the only
reliable means of ensuring the correct order of operations.  Both
`set()` and `remove()` accept callback functions as well.  Here's an
example of removing a key, then performing an operation afterwards:

ok, so I fund the chunk I was looking for, and the function is called an anonymous function.  Like the quote says, what’s up with it?  Two concepts I don’t understand:  asynchronous and callbacks.  So what is asynchronous?  Asynhronous means that it doesn’t have to happen in a particular order- it can happen at any time.  So what does that mean?  It’s like a customer entering a restaraunt.  A customer could enter the restaraunt at any time, and the restaurant has to be ready.  So what does the restaraunt do?  it sets up a callback.   Accordijng to Wikipedia, a callback is a piece of executable code passed as a argument to other code. 

I still don’t have enough information to really understand why a callback is needed….um.   Oooh. It does come down to asyncrhonity.  See, databases take a lot of time to access, so designers thought it would be a good idea to let the rest of the javascript run without having to rely on whether you got something from it.  Think of the database like a warehouse, the webpage like a store, and the javascript like the store clerk.  The clerk tells someone to go get twenty rolls of toilet paper from the warehouse, because the public toilets have run out.  The clerk has ten thousand other things to do, like do checkouts, and so doesn’t wait for the toilet paper to come back before going of and doing other things.  That’s what asynchronous means- it doesn’t depend on things happening in a certain order.  However, the one thing the clerk can’t do is refill the toilet paper in the stalls. Why?  Because he doesn’t have the toilet paper.  So what does the clerk do?  the clerk tells the warehouse to call him back when they have filled the toilet paper order.  This is a callback. 

Now javascript is really dumb, so unless we specifically tell it not to, it will do things like try and put toilet paper in bathrooms without having the toiletpaper first. 

So we put the instruction (put toilet paper in bathroom) in a callback function.  See, what’s inside that function only  happens when the database has called back- i.e. when the warehouse has called the clerk and told him that the toilet paper has been delivered. 

Hmm.  I’m still a bit hazy as to why the callback function has the two variables “ok”  and “val” are doing. 

 Test.store.get(‘some_key’, function(ok, val) {
      if (ok)
        Test.get(‘data’).value = val;
    });

Look, all we really need to get a value is the key.

let’s see what stack overflow has to say about callbacks callbacks 

ok, that is useful.  I’m understanding callbacks all wrong.  Going back to my analogy, including a callback when the clerk orders more toilet paper is like sending an underling to the warehouse and telling the warehouse: here.  here’s an underling with a specific job that he does.  Use him as you see fit. 

In this case, the underling’s job is to refill the bathrooms with toilet paper as soon as the warehouse gets it, but the underling’s job could be anything.  It’s just a way of giving the warehouse something it could use for a particular task. 

And apparently in this specific instance, it is the function’s job to display the value if it is ‘ok.’  which i assume means something along the lines of ‘there exists a value for this key, display it.” 

And that’s all the understanding I’m going to wring from this unless I read the entire library.  The entire library looks very object oriented, something I have absolutely zero experience with.  Hmmm.  I think I’m going to have to forgo true understanting and memorize the magic incantation  anonoymous  function(ok, val){} that is the callback function in order to get data out of my data store. 

On the other hand, at least I know what a callback is.  It’s a lovely helper sent to a warehouse for the staff there to make use of.  .