What is the correct way to work with backbone.localStorage?

Question

JavaScript

I can't figure out how to store data in Backbone via backbone.localStorage.
I create a collection, I add to it.

App.Collections.Elements= Backbone.Collection.extend({
    model: App.Models.Element,
    localStorage: new Backbone.LocalStorage("SomeCollection")
  });
var elements = new App.Collections.Elements(elementsArray);

When the page loads, a list of models in the collection is displayed. Through the form in its VIEW, the model is added to the collection as follows

this.model.set({
        surname: this.surname.val(),
        name: this.name.val(),
        middlename: this.middlename.val(),
        tel: this.tel.val(),
        email: this.email.val()
});
elements.add(this.model);

A new element is added to the page. But when the page is refreshed, everything is reset.

Answer 1

because the set method only sets the parameters of the model, and the save method is used to save the model

Answer 2

Thank you. But I'm probably doing something wrong again. I would not want to be impudent and get with questions, but the second day I just can’t figure out how to add the created models to the collection in localStorage. I understand the examples of using backbone.localStorage, but it doesn’t work.
1) I create an instance of the model

App.Models.Element= Backbone.Model.extend({
    defaults: {
       ........
    }
  });

2) I create and fill the collection with initial data

App.Collections.Elements= Backbone.Collection.extend({
    model: App.Models.Element,
    localStorage: new Backbone.LocalStorage("SomeCollection")
  });
  var elements= new App.Collections.Elements(elementsArray);

3) Then I create a VIEW

App.Views.Elements= Backbone.View.extend({
    template: tpl('elementsTpl'),

    initialize: function() {
      this.listenTo(elements, 'add', this.render);
    },

    render: function() {
      this.$el.html( this.template({ elements: elements.toJSON() }) );
      return this;
    }
  });

Sample

<script id="elementsTpl" type="text/template">
      <ul class="elements">
        <% _.each(elements,function(element) { %>
        <li class="element">
          <div class="element-name"><%= element.name %></div>
          <div class="element-date"><%= element.date%></div>
        </li>
        <% }); %>
      </ul>
    </script>

4) In the VIEW of the application during initialization

var elementsView = new App.Views.Elements;
      $('#elements-container').html(elementsView .render().el);

When the page is loaded, a list of initial models is created. Through the console, when adding or removing models from the elements collection, the list changes accordingly, but when reloading, everything is all over again. I add to the collection via add or create. Please explain what I'm doing wrong