Storan tempatan Nota

Nota storan setempat JavaScript

Kod ini menunjukkan cara menggunakan JavaScript untuk mengendalikan storan setempat, menyimpan dan memaparkan kandungan teks.

Kod JavaScript:

let title = document.getElementById('title');
let text = document.getElementById('body');
let saveBtn = document.getElementById('save');
let display = document.getElementById('display');
let pst = document.getElementById('pst');
let clr = document.getElementById('clr');

saveBtn.onclick = function() {
  if (text.value === '') {
    alert('正文内容不能为空！');
  } else {
    pst.innerHTML += `
      <div>
        <p>CSS:</p>
        <pre class="brush:php;toolbar:false">
          #display {
            border: 4px solid;
          }
          #saver {
            border: 2px solid;
          }
          #clr {
            margin: 5%;
          }
          #editor {
            box-shadow: 0 0 3px red;
          }
          #editor input {
            width: 80%;
            box-shadow: 0 2px;
            color: #fff;
            -webkit-text-stroke: 1px #111;
          }
          #editor textarea {
            width: 80%;
            display: block;
            margin: 5% 2px 2px 9%;
            box-shadow: 0 0 3px;
            text-align: center;
          }
          #editor button, #display button {
            background: conic-gradient(navy, #44f);
            border-radius: 10px;
            border: 4px solid #0f07f0;
            width: 80%;
            font-size: 24px;
            color: white;
            -webkit-text-stroke: 2px red;
            font-weight: 800;
            text-transform: uppercase;
          }
        

HTML:

`; } };

Kod ini menggunakan format kod yang lebih jelas, dan beberapa pernyataan diubah suai sedikit, seperti menukar == kepada === untuk menjadikan kod lebih piawai. Bahagian HTML telah dibenamkan dalam iframe dan tiada pengubahsuaian tambahan diperlukan. Kod gaya CSS juga telah diseragamkan dan ditaip untuk memudahkan pembacaan.

Atas ialah kandungan terperinci Storan tempatan Nota. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!