Giter Club home page Giter Club logo

Comments (9)

ismnoiet avatar ismnoiet commented on June 4, 2024

A good question, me too i was looking for the an answer, and after a little bit of tweaking i found out this:

// Let's say the name of the localStorage item is myData inside the collection 
// localStorage attribute.
var Collection = Backbone.Collection.extend({
    model:Model,        
    localStorage: new Backbone.LocalStorage("myData")
});

// now you have access  to myData localStorage item 
console.log(localStorage.getItem('myData');

// Now what you get from the previous instruction is an array of IDs representing
// the IDs of models inside the myData collection

//Now the key for each model inside the local storage is :
// collectionName + '-' + id(an element of the array localStorage.getItem('myData'))

// all models are stored in the one string joined by ','
var firstModel = localStorage.getItem('myData-'+localStorage.getItem('myData').split(',')[0]);
console.log(firstModel); // now you get the first model logged out to the screen 


// Note here that each Model id is the same one stored inside
// the array localStorage.getItem('myData')





// Here is a simple example without too much talking :

var LOCALSTORAGE_NAME = 'myData';

var collectionOfIDs = localStorage.getItem(LOCALSTORAGE_NAME);
    collectionOfIDs = collectionOfIDs.split(',') // because ',' is used to join model IDs in a single string stored in the variable collectionOfIDs 


var models = collectionOfIDs.map(function(modelID){
    return localStorage.getItem(LOCALSTORAGE_NAME + '-' + modelID);
});

console.log('models stored under the collection myData are : ',models);


Hope this helps and have a nice day :)

from backbone.localstorage.

ismnoiet avatar ismnoiet commented on June 4, 2024

You can check my fork for the Real world example as it is not yet an accepted PR
https://github.com/ismnoiet/Backbone.localStorage

in the README file

from backbone.localstorage.

absolux avatar absolux commented on June 4, 2024

As simple as

var Collection = Backbone.Collection.extend({ localStorage: new LocalStorage('todos') })
var todos = new Collection
todos.fetch() 

from backbone.localstorage.

ismnoiet avatar ismnoiet commented on June 4, 2024

Thank you @absolux for the direct answer, but if you want really to know how collection items are stored in the localStorage then my solution is here to show you how they are exactly stored in the there, you can also play around with it and see what you get :)

from backbone.localstorage.

absolux avatar absolux commented on June 4, 2024

Thanks @ismnoiet for reply.
But, why should we direct access localStorage global object instead of the Backbone collection ?

from backbone.localstorage.

ismnoiet avatar ismnoiet commented on June 4, 2024

@absolux Good question, my answer is for curious people who want to learn how things are stored, otherwise your answer is the direct one and should be used for real world usage.
Because sometimes you need to implement something like backbone collection with your own javascript framework or even just with your javascript code. for short use my solution to learn about real world implementation and your solution if you just need to use it and that's it :).
Hope this is a clear answer.

from backbone.localstorage.

scott-w avatar scott-w commented on June 4, 2024

Hi guys,

Thanks for contributing this. I'll be updating the code to ES6 + modules soon which should make the implementation a little more obvious.

Regards,
Scott

from backbone.localstorage.

adabonyan avatar adabonyan commented on June 4, 2024

I have just read this while struggling with how to permanently delete models in local storage. How can I achieve this as all the tricks I can think of failed.

from backbone.localstorage.

scott-w avatar scott-w commented on June 4, 2024

from backbone.localstorage.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.