Как сохранить коллекцию в localStorage

434

05 ноября 2017, 20:09

Помогите пожалуйста понять как нужно сохранять коллекцию геообъектов(маркеров) в localStorage.

Я написал скрипт, который ставит на яндекс-карту маркер после клика по карте. Но я хотел бы сохранить набор поставленных маркеров таким образом чтобы после перезагрузки страницы они снова были отрисованы на карте.

Местом хранения коллекции этих маркеров я выбрал localStorage. Но проблема в том, что js не хочет записывать в localStorage объект коллекции. Консоль выводит следующее сообщение об ошибке:

Uncaught TypeError: Converting circular structure to JSON

ymaps.ready(init);
var myMap,
    myCollection,
    myPlacemark;
function init(){     
    myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 7
    });
    myCollection = new ymaps.GeoObjectCollection ({},
      { geoObjectDraggable: true }
    );
    myMap.events.add('click', function (e) {
        var coords = e.get('coords');
        console.log('lat:', coords[0], 'lng:', coords[1]);
        var placemark = new ymaps.Placemark([coords[0], coords[1]]);  
        this.myCollection.add(placemark);       
        myMap.geoObjects.add(this.myCollection);
        console.log(this.myCollection);              
        addPoint();            
    });
};
function getPoints() {
    return localStorage.points ? JSON.parse(localStorage.points) : [];
};
function addPoint() {
    console.log(myCollection);
    var points = getPoints();
    localStorage.points = JSON.stringify(myCollection);
};

Если нужно, то вот JSFIDDLE. Но в нём консоль показывает совсем другую ошибку, поэтому лучше его не смотреть.

Мне важно именно использовать коллекцию. Вариант, который не использует коллекцию и записывает координаты маркеров в локалсторадж в виде обычного объекта я уже реализовал.

Answer 1

Вы не сможете преобразовать инстанс "GeoObjectCollection" в строку напрямую - он хранит внутри себя инстансы других классов, в которых имеются ссылки на родителей, а "JSON.stringify" в такое не умеет.

Лучшим решением для вас будет хранить минимально необходимый набор данных для воссоздания инстанса "GeoObjectCollection" - именно набор точек.

Примерно так:

riseCollection() {
   var points = JSON.parse(localStorage.getItem('points') || []),
      raisedCollection = new ymaps.GeoObjectCollection ({}, {
         geoObjectDraggable: true
      });
   points.forEach(function(point) {
      raisedCollection.add (
         new ymaps.Placemark([point[0], point[1]])
      ); 
   });
   return raisedCollection;
}