>웹 프론트엔드 >CSS 튜토리얼 >로컬 저장소 참고

로컬 저장소 참고

Linda Hamilton
Linda Hamilton원래의
2025-01-17 02:08:09865검색

Local storage Note

JavaScript 로컬 저장 참고사항

이 코드는 JavaScript를 사용하여 로컬 저장소를 작동하고 텍스트 콘텐츠를 저장 및 표시하는 방법을 보여줍니다.

자바스크립트 코드:

<code class="language-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:

`; } };

이 코드는 더 명확한 코드 형식을 사용하며, 코드를 더 표준화하기 위해 =====로 변경하는 등 일부 명령문이 약간 수정되었습니다. HTML 부분은 iframe에 포함되어 있으므로 추가 수정이 필요하지 않습니다. CSS 스타일 코드도 표준화되어 읽기 쉽도록 입력되었습니다.

위 내용은 로컬 저장소 참고의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:대화형 NFT 미리보기 카드 구성요소 생성다음 기사:없음

관련 기사

더보기