Local storage with LocalStore.js - blakemachado/Pokki GitHub Wiki

Quick overview of Local Storage in Pokki

Local Storage is an HTML5 standardized way to store and access data on a local machine and it's fully supported in Pokki. It's like an improved version of cookies, and because cookies are not really available in Pokki (given Pokkies do not run on domains), it's the only reliable method for storing data locally.

Pokkies are sandboxed meaning only your Pokki can access your locally stored data. That said, locally stored data ends up sitting on a user's hard drive and is not protected. If you want to store sensitive data locally you should be sure to scramble it which essentially obfuscates it.

Using LocalStore.js

LocalStore.js is a little wrapper we built to make dealing with localStorage as easy as possible. You can grab it from our git repo (its located at lib/LocalStore.js).

  • new LocalStore(str key, obj options)

    Instantiates a new LocalStore object

     // Instantiating a LocalStore object without options
     var local = new LocalStore('local_key');
    
     // Instantiating a LocalStore object explicitly with options (these are their default values)
     var local  = new LocalStore('local_key', {
          defaultVal: null,
          scrambled: false
     });
    
  • LocalStore.set(var data)

    Stores data in LocalStore object

     // Examples of storing data
     local.set("awesome");
     local.set(false);
     local.set({complex: 'stuff'});
    
  • LocalStore.get()

    Returns data stored in a LocalStore object

     var data = local.get();
    
  • LocalStore.remove()

    Removes data stored in a LocalStore object

     local.remove();
    

Add LocalStore.js to your Pokki

To get started, add LocalStore.js to your Pokki and load it in your popup and background page.

<head>
...
<script href="js/lib/LocalStore.js"></script>
</head>

LocalStore in practice

First run example

From the popup, let's create our first LocalStore object:

<script>
var first_run = new LocalStore('first_run', {defaultVal: true});
if (first_run.get()) {
    console.log("It's the first time your Pokki has run!");
    first_run.set(false);
}
</script>

This is a simple and useful trick to execute logic the first time your Pokki runs.

Storing scrambled data

<script>
var user_session = new LocalStore('user_session', {scrambled: true});
user_session.set(request_session());
if (valid_session(user_session.get())) {
    // this is a valid user...
}
else {
    // this user is invalid, lets remove the session
    user_session.remove();
}
</script>

Accessing a LocalStore from both popup and background_page

popup:

var local_popup = new LocalStore('this_is_the_key');

background:

var local_background = new LocalStore('this_is_the_key');

Both of these variables share the same LocalStore key this_is_the_key and thus access the same data. There's no reason they have different variable names other than for the explicit sake of this example.

⚠️ **GitHub.com Fallback** ⚠️