Итак, для начала у меня есть:
var tempArray = [];
tempArray.push(get);
В этом случае переменная get захватывает HTML-код клонированного элемента div.
Что я пробовал последнее:
tempArray.push(get);
var myJSONString = JSON.stringify(tempArray);
var parseString = $.parseJSON(myJSONString);
var finalString = myJSONString.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');
var joinString = tempArray.join(",");
А потом:
// Save
localStorage.setItem('sessions', finalString);
Что я всегда получаю:
tempArray[div "," div]
Я объявил массив вне функции как:
var tempArray = [];
Я помещаю содержимое в массив здесь:
// Decide to add or remove
if(box.hasClass("selected")){
console.log("Add to array")
tempArray.push(get);
// Add to favorites tab
favoriteTab.append(boxContent);
}
Полный JS
console.clear();
//localStorage.setItem('sessions', "");
var tempArray = [];
// Clones
$('div.tab-pane').on('click', '.favorite', function(e) {
e.preventDefault();
// Elements we play with... Having significative variable names.
var heartLink = $(this);
var box = heartLink.parent('.box');
var container = box.parent('.box-container');
var favoriteTab = $("#fav .spaces");
// I don't know what is the use for those 3 lines below.
var idFind = box.attr("id");
var idComplete = ('#' + idFind);
console.log(idComplete);
//TOGGLE FONT AWESOME ON CLICK
heartLink.find('i').toggleClass('fa-heart fa-heart-o'); // .selected or not, you need those 2 classes to toggle.
box.toggleClass("selected not-selected"); // Toggle selected and not-selected classes
// Clone div
var boxContent = container.clone(true, true);
// Change the id
var thisID = boxContent.attr("id")+"_cloned";
boxContent.attr("id", thisID);
// Get the html to be saved in localstorage
var get = boxContent.wrap('<p>').parent().html();
get = get.replace(/\r?\n/g, "").replace(/>\s*</g, "><"); // remove line feeds and spaces
console.log(get);
boxContent.unwrap();
// Decide to add or remove
if(box.hasClass("selected")){
console.log("Add to array")
tempArray.push(get);
// Add to favorites tab
favoriteTab.append(boxContent);
}else{
console.log("Remove from array");
var index = tempArray.indexOf(get);
tempArray.splice(index);
// Remove from favorite tab
favoriteTab.find("#"+thisID).remove();
}
// Save
localStorage.setItem('sessions', tempArray);
});
// Append item if localstorage is detected
if (localStorage["sessions"]) {
$("#fav .spaces").append(localStorage["sessions"]);
console.log( localStorage.getItem('sessions') );
}
Полный html
<section id="speakers-programme">
<div class="container">
<div class="tabs_main">
<div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">Monday</a></div>
<div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">Tuesday</a></div>
<div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="mon">
<br>
<div class="spaces">
<div class="box-container">
<div class="box not-selected" id="box1">
<span>1</span>
<a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
</div>
<div class="box-container">
<div class="box not-selected" id="box2">
<span>2</span>
<a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="tue">
<br>
<div class="spaces">
</div>
</div>
<div class="tab-pane active" id="fav">
<br>
<div class="spaces">
</div>
</div>
</div>
</div>
</section>
Скрипт: https://codepen.io/Bes7weB/pen/NvQQMN?editors=0011< /а>
Итак, в этом примере, если вы нажмете на вкладку «Понедельник» и нажмете на оба сердца, родительский div будет клонирован на вкладку «Избранное», а затем, если вы обновите страницу, вы увидите оба div с запятой на середина.
Любая помощь приветствуется, большое спасибо!
join
действительно не влияет на массив. Он возвращает новую строку. - person Bergi   schedule 11.09.2017tempArray
, чтобы получить эту нежелательную запятую? - person Bergi   schedule 11.09.2017localStorage
. Проблема в том, что он не хранит объекты, он хранит строки - и ваш массив неявно становится строковым с помощью стандартного метода, который дает разделитель запятой. Вместо этого вы захотите явно использоватьJSON.stringify
иJSON.parse
. - person Bergi   schedule 11.09.2017parseString
,finalString
,joinString
?! Просто сохранитеmyJSONString
и покончите с этим. Затем при обращении к памяти нужно сделатьJSON.parse(localStorage.getItem(…))
. - person Bergi   schedule 12.09.2017