TK.ClientStorage

This component can be used to store data (text, blobs, files and byte arrays) in the browser. It try to use IndexedDB when available, and falls back to localStorage (lower storage limits).

The .Retrieve, .Delete, .GetUrl and .Store methods are called the same way as the TK.ServerStorage component. However, the .List call will return an array of paths instead.

A prefix setting is available in case multiple sites are hosted within the same domain.

Example

{
    Init: function() {
        this.Elements.Files.Refresh();
    },
    Elements: {
        Storage: {
            _: TK.ClientStorage,
        },
        Files: {
            Refresh: function() {
                var obj = this;
                this.Clear();
                this.Parent.Elements.Storage.List(function(paths) {
                    obj.Add({
                        _: TK.Table,
                        EnableRemoveButton: true,
                        Rows: paths.Select(function(a) { return { Path: a } }),
                        RowClick: function(item) {
                            obj.Near("Storage").GetUrl(item.Path, function(url) {
                                window.open(url, "_blank");
                            }); 
                            
                        },
                        Save: function(item, remove) {
                            obj.Near("Storage").Delete(item.Path, function(isDeleted) {
                                obj.Refresh();
                            });                            
                            return false;
                        }
                    });
                });
            }
        },
        File: {
            _: "input",
            type: "file",
            onchange: function() {
                var obj = this;
                if (this.files.length == 0)
                    return;
                this.Near("Storage").Store(this.files[0].name, this.files[0], function(fileMetaData) {
                    obj.Near("Files").Refresh();
                });
            }
        }
    }
}