JavaScript: The less known parts. Storage.

'JavaScript: The less known parts' chapters:
1. Bitwise Operators
2. Storage
3. Dom Mutations

Client side storage is almost as old as Internet itself. Back in the days we used cookies for this, but since Firefox 2 & Safari 4 browsers support DOM Storage techniques. We are probably all familiar with IndexedDB or deprecated WebSQL. Both of them are widely supported in almost all of the newest browsers:

localStorage

Thats not all - we also have well known localStorage & sessionStorage key/value client storage system. We can simply save the value in one window:
And load it in another:

The advantage of local/session storage over IndexedDB is that we can listen to an event that fires when something has changed - we can for instance propagate those changes to all the browser cards or iframes in our application. Choose the 'result' tab in the next fiddle, go back to the first one and save something using the form.
It's helpful also in IndexedDB based apps - for example PouchDB made by Dale Harvey use localStorage events with IndexedDB data to keep everything up to date everywhere.

window.name storage

We can also use window.name property to store data on the client side. This ancient method allows us to read and write data across pages and domains, even from outside the current origin. According to Wikipedia [HTTP COOKIE] we can store up to 32MB there (according to some sources its even around 60MB). It's also accessible even before domready event. And even if it's not really cleaver idea in times of tabbed browsing (every new tab starts with empty window.name), it's still used as a fallback in for older browsers. More on window.name storage:
Ajaxian: What’s in a window.name?
Cookie-less Session Variables in JavaScript
Session variables without cookies
HTML5 sessionStorage for "every" browsers

See you next Monday in the 3rd part of Javascript: The less known parts. Follow me on Twitter and stay informed about next parts!

My TV Shows list

I've updated the list of all the TV Shows I've watched since February 2008. So far it's 48 shows, 3295 episodes in total, what gives 1854 hours and 12 minutes (around 77 full days and nights). If you know anything I should watch, and it's not on a list (or 'Shows to consider' list), please fork my repo and update my proposals. You can also vote for other series in the 'proposals' part.

Github repo: michalbe/tv-series
Rendered list: gh-pages/tv-series

JavaScript: The less known parts. Bitwise Operators.

'JavaScript: The less known parts' chapters:
1. Bitwise Operators
2. Storage
3. Dom Mutations

Most of us probably use JavaScript every day - in my case it's building a mobile operating system in my daily job, preparing crazy and ridiculous demos for various conferences or run personal projects in my free time (mostly games). But even with years of experience (probably because the language itself is full of weird quirks and unintuitive patterns), from time to time I'm still getting surprised with new crazy hacks, techniques or workarounds. I want to put most of those things in one place and publish one every Monday - for last couple of years I wasn't really active on the blog, it's time to change this. First - bitwise hacking.

Bitwise operators

Most of us know know that there are some bitwise operators in JS. Every number has it's own binary representation, used by those operators. To check dec number's binary value, we use .toString() method with base argument - '2' for binary:


There are seven different bitwise operators. Assuming that variable a is equal to 5, and b is 13, those are actions and results of their operations:


Sometime we even use Bitwise OR as equivalent of Math.floor():


It has the same effect as double NOT operator (my favorite rounding solution since I first heard about it on Damian Wielgosik's workshop couple of years ago).


What about other real life examples of bit chaking? For instance, we can convert colors from RGA to Hex format:


We can also simply check which number in a pair is smaller (like Math.min) or bigger (Math.max):


Of course since Math library is really well optimized nowadays, using those hacks doesn't make any sense. But what about variables swap? Most common solution is to create a temporary variable to achieve that, what is not really efficient. It's simpler to use bit operations here:


Even with 'Pythonish' variable swap introduced in JavaScript 1.7, bitwise solution is the fastest way to achieve that.
JSPerf test [here]:


Great place to learn more bit-tricks to make your JS app: Sean Eron Anderson's site [Stanford PhD].
Do you know and use any more binary tricks in your JavaScript projects?