multiple tabs sync

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<section class="document">
    <input type="text" data-bind="value:newItemName" />
    <button class="add" data-bind="click:create">Create</button>
    <button data-bind="click:clear">clear</button>
    <ul class="list" data-bind="foreach:items">
        <li data-bind="text:name"></li>
    </ul>
</section>

JavaScript

"use strict";

var model = {
    newItemName: "test",
    items: ko.observableArray([]),
    create: function () {
        addToDB(this.newItemName);
    },
    clear: function () {
        localStorage.clear();
        clear();
    }
};

ko.applyBindings(model, document.querySelector('.document'));

window.addEventListener('storage', function (e) {
    console.log(e);
})

function addToDB(name) {
    var id = 'data-' + new Date().getTime();
    localStorage.setItem(id, name);
    addItemToTheList(id, name);
}

function addItemToTheList(key, value) {
    model.items.push({
        name: value
    });
}

function rebuild() {
    for (var index = 0; index < localStorage.length; index++) {
        var key = localStorage.key(index);
        var item = localStorage.getItem(key);
        addItemToTheList(key, item);
    }
}

function clear() {
    model.items([]);
    rebuild();
    return;
}
rebuild();