0

Всем привет, я начинающий разраб в javascript. У меня есть почти готовый код, но я никак не могу добавить в localStorage ещё одну функцию. Задача скрипта: копировать выделенный текст и вставлять его в новый div и вот тут начинается проблема с добавлением и запоминанием в localStorage уникального класса. Я пытаюсь добавить класс div-i, но localStorage его не запоминает. Подскажите в чем проблема.

<!DOCTYPE HTML>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body>
  <div>
    <p>Текст предназначенный для выделения</p>
    <p>Текст предназначенный для выделения2</p>
    <p>Текст предназначенный для выделения3</p>
  </div>
  <div id="sel">Здесь будет текст, который будет выделяться</div>
  <button class="save-btn" onclick="saveText();">Сохранить</button>
  <script src="copy2.js" charset="utf-8"></script>
</body>

</html>

"use strict";

function getSelectionText() {
  var text = "";
  var activeEl = document.activeElement;
  var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
  if (
    (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
    (typeof activeEl.selectionStart == "number")
  ) {
    text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
  } else if (window.getSelection) {
    text = window.getSelection().toString();
  }
  return text;
}

function saveText() {
  var text = "<div class=\"copyDiv\">" + "<p>" + getSelectionText() + "</p>" + "<button class=\"close\" onclick=\"deleteText();\">x</button>" + "</div>";
  if (localStorage.getItem("savedText") === null) {
    localStorage["savedText"] = "";
  }
  localStorage["savedText"] += text;
  showText();
  takeClass();
}

function showText() {
  var innerDiv = localStorage["savedText"];
  document.getElementById("sel").innerHTML = innerDiv;
  takeClass();
}

function takeClass() {
  var btn = document.querySelector(".save-btn");
  var sel = document.querySelector("#sel");
  var div = document.querySelector(".copyDiv");
  var children = sel.childNodes;
  var activeBtn = btn.addEventListener('click', function() {
    for (var i = 0; i < 30; ++i) {
      if (children[i]) {
        children[i].classList.add("div-" + i);
      }
    }
  });
  var innerClass = localStorage["savedText"];
  activeBtn = innerClass;
}

function deleteText() {
  document.getElementById("sel").innerHTML = '';
  localStorage.removeItem("savedText");
}

window.onload = function() {
  showText();
  takeClass();
};
4
  • Можно попробовать используя функцию localStorage.setItem("savedText", 'text') И еще посмотреть в сторону экранирования символов
    – luk-alex
    Commented 2 апр. 2018 в 7:08
  • Не запоминает именно вот эту функцию takeClass()
    – ApolloBear
    Commented 2 апр. 2018 в 7:16
  • Здравствуйте Илья. Текст сохраняется лишь тот, который выделен на HTML странице.
    – ApolloBear
    Commented 2 апр. 2018 в 7:44
  • 1
    Справедливости ради, у вас действительно нет ни одного вызова localStorage.setItem. Так что то, что ничего не запоминается, вовсе не неожиданность. Даже если это где-то работает, на это не стоит опираться. См. MDN.
    – user181100
    Commented 2 апр. 2018 в 7:45

1 ответ 1

2

Я бы не рекомендовал этот способ, но все же

Для сохранения функции переведите ее в строку:

var yourFunc = function() { ... }
localStorage.setItem('func', yourFunc.toString())

Для того чтобы ее выполнить:

var func = localStorage.getItem('func')
var yourFunc = eval('(' + func + ')')
yourFunc()

UPD: и не стоит использовать localStorage как простой объект. Пользуйтесь функциями setItem, getItem

3
  • В строку переводить не нужно - localStorage и так хранит данные только в строковом формате. И лишняя переменная func тоже не нужна - можно getItem сразу внутри eval вызывать. Но в целом, да, - годное решение. Поставил плюс. Commented 2 апр. 2018 в 8:52
  • Эмм не совсем понял как встраивать данный код и вопрос, какой способ порекомендовали бы для данного случая?
    – ApolloBear
    Commented 2 апр. 2018 в 12:32
  • @ApolloBear где хотите сохранить функцию в localStorage используйте блок с setItem, где вызвать ее, блок с getItem Commented 2 апр. 2018 в 13:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.