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
    2 апр 2018 в 7:08
  • Не запоминает именно вот эту функцию takeClass()
    – ApolloBear
    2 апр 2018 в 7:16
  • Здравствуйте Илья. Текст сохраняется лишь тот, который выделен на HTML странице.
    – ApolloBear
    2 апр 2018 в 7:44
  • 1
    Справедливости ради, у вас действительно нет ни одного вызова localStorage.setItem. Так что то, что ничего не запоминается, вовсе не неожиданность. Даже если это где-то работает, на это не стоит опираться. См. MDN.
    – user181100
    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 вызывать. Но в целом, да, - годное решение. Поставил плюс. 2 апр 2018 в 8:52
  • Эмм не совсем понял как встраивать данный код и вопрос, какой способ порекомендовали бы для данного случая?
    – ApolloBear
    2 апр 2018 в 12:32
  • @ApolloBear где хотите сохранить функцию в localStorage используйте блок с setItem, где вызвать ее, блок с getItem 2 апр 2018 в 13:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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