在运行时在 javascript 中创建 .json 文件并将其保存在最后答案

【问题标题】：create .json file on run time in javascript and save it in the end在运行时在 javascript 中创建 .json 文件并将其保存在最后
【发布时间】：2019-07-30 18:09:35
【问题描述】：

这是我的脚本。它正在做两件事。

鼠标上移时会突出显示文本
在突出显示文本时，单击它会打开一个上下文菜单

我接下来要做的是：

将突出显示的文本作为key
将上下文菜单中的选定选项设为value
以JSON 格式保存key:value 对
将JSON写入文件

我是网络新手，需要有关如何操作的建议。到目前为止，我的菜单项是可点击的，但接下来要做什么以及如何实现我想要实现的功能是我需要帮助的问题。

<!DOCTYPE html>
<html>

<head>
  <title>TEST</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="context_menu.js"></script>


  <style type="text/css">
    .red {
      color: red;
    }
    
    ;
    body {
      font-family: "Roboto", san-serif;
    }
    
    .center {
      text-align: center;
    }
    
    .menu {
      width: 120px;
      z-index: 1;
      box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
      position: fixed;
      display: none;
      transition: 0.2s display ease-in;
      .menu-options {
        list-style: none;
        padding: 10px 0;
        z-index: 1;
        .menu-option {
          font-weight: 500;
          z-index: 1;
          font-size: 14px;
          padding: 10px 40px 10px 20px;
          // border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
          cursor: pointer;
          &:hover {
            background: rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
    
    button {
      background: grey;
      border: none;
      .next {
        color: green;
      }
      &[disabled="false"]:hover {
        .next {
          color: red;
          animation: move 0.5s;
          animation-iteration-count: 2;
        }
      }
    }
    
    @keyframes move {
      from {
        transform: translate(0%);
      }
      50% {
        transform: translate(-40%);
      }
      to {
        transform: transform(0%);
      }
    }
  </style>

  <body>


    <div class="menu">
      <ul class="menu-options">
        <li class="menu-option" id="demo" onclick="myFunction()">Animal</li>
        <li class="menu-option">Bird</li>
        <li class="menu-option">Human</li>
        <li class="menu-option">Alien</li>
        <li class="menu-option">No one</li>
      </ul>
    </div>

    <div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset imply dummy text sheets containing Lorem Ipsum passages, and more
      recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

  </body>
  <script>
    const menu = document.querySelector(".menu");
    console.log(menu)
    let menuVisible = false;
    const toggleMenu = command => {
      console.log("Togel : " + command)
      menu.style.display = command === "show" ? "block" : "none";
      menuVisible = !menuVisible;
    };

    const setPosition = ({
      top,
      left
    }) => {
      console.log(top)
      console.log(left)
      menu.style.left = `${left}px`;
      menu.style.top = `${top}px`;
      toggleMenu("show");
    };

    // window.addEventListener("click", e => {
    //   	
    // });

    $(function() {
      thisRespondHightlightText(".select--highlight--active");
    });
    /*thisRespondHightlightText(".select--highlight--active");*/


    function thisRespondHightlightText(thisDiv) {
      $(thisDiv).on("mouseup", function() {
        console.log("EVENT")
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText, "g");
        var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
        console.log("Text " + selectedText)
        $(this).html(text);
        if (selectedText == "") {
          toggleMenu("hide");
        } else {

          const origin = {
            left: 100,
            top: 100
          };
          setPosition(origin);
        }

      });
    }

    function getSelectionText() {
      var text = "";
      if (window.getSelection) {
        text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
        alert("In else")
        text = document.selection.createRange().text;
      }

      return text;
    }

    function myFunction() {
      document.getElementById("demo").innerHTML = "I am an Animal!";
    }
  </script>
</head>



</html>

【问题讨论】：

您无法在客户端使用 Javascript 创建文件。
您应该将数据保存到 localStorage 中。请参阅stackoverflow.com/a/20823621/7035903
这段代码一团糟。我不知道你想做什么，但我敢肯定这不是远程做的。 VTC 过于宽泛
不能在客户端写入json文件
尝试创建像var jsonData = {};这样的json数据，然后添加像jsonData[key] = value;这样的项目。只需在需要的地方正确应用代码即可。

标签： javascript jquery html web contextmenu

【解决方案1】：

要创建 JSON 数据，请使用声明它

var jsonData = {};

然后将key:value项目分配给它

jsonData[key] = value;

您以后可以使用密钥访问其数据

var value = jsonData.key;
var value = jsonData['key'];

【讨论】：