前言

在当今的Web应用中，提升用户体验是至关重要的，特别是在用户交互频繁的场景下。在B站，QQ，微信，抖音等社交平台上，个性签名的编辑与更改是个人主页的重要组成部分。为了进一步优化用户体验，设想一种名为“就地编辑”（EditInPlace）的功能，该功能允许用户在对个性签名修改时进行快速编辑，无需跳转新的页面或弹窗。

正文

这个个性签名是直接以`span`标签的形式展现在页面上

但是当我们点击它

就可以执行编辑功能

特点：

即时预览：用户在编辑框内输入或修改文字时，下方或旁边的预览区域会实时显示签名效果，帮助用户直观看到修改后的样子，确保最终效果符合预期。
简洁交互：通常采用鼠标悬停或点击个性化签名区域激活编辑模式，编辑完成后，通过点击页面其他空白处或特定的“保存”按钮来确认修改，减少用户操作步骤。
格式支持：支持基础的文本格式化，如加粗、斜体、下划线、链接插入等，让签名更加丰富多彩，满足用户的个性化需求。
字符限制：设定合理的字符数限制，既保证了界面的整洁，也促使用户精炼语言，创造更有吸引力的签名。

了解了就地编辑的特点，现在我们开干！

新建一个html页面并将他初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>就地编辑</title>
</head>
<body>
    <div id="signature"></div>
</body>
</html>

接着我们需要来写signature标签的事件

在实战项目中，为了实现代码的复用，我们需要对函数和类进行封装，能够让项目运行更加高效

<script>  
         const signature = '我是个性签名'
        new EditInPlace(document.getElementById('signature'),signature)
    </script>

接着我们来写这个类，我们引入文件edit_in_place.js，并开始写函数和类

我们先将EditInPlace()构造函数完善：

function EditInPlace(storageKey,container,value = '这个家伙很懒，什么都没有留下') {
    this.container = container;
    this.value = value
    //将动态创建文本和编辑input的dom 封装，代码管理好
    this.createElement();
}

若是传入的value为空，那么则给value赋值“这个家伙很懒，什么都没有留下”

因为Javascript没有类的概念，所以我们在Javascript的项目编写时，类里的方法我们要往它的构造函数的原型上去写

如果不太明白原型和原型链的概念，可以看我之前发的文章《原型和原型链》

EditInPlace.prototype = {
    // 就地编辑的需要的动态dom
    createElement:function() {
        //DOM树
        // 创建一个div
        this.editElement = document.createElement('div');
        //添加一个子元素
        this.container.appendChild(this.editElement);
        
        //signature 文本值
        this.staticElement = document.createElement('span');
        this.staticElement.innerHTML = this.value;
        this.editElement.appendChild(this.staticElement);

        //input 
        this.fieldElement = document.createElement('input');
        this.fieldElement.type = 'text';
        this.fieldElement.value = this.value;
        this.editElement.appendChild(this.fieldElement);

        //确定按钮
        this.saveButton = document.createElement('input');
        this.saveButton.type = 'button';
        this.saveButton.value = '保存';
        this.editElement.appendChild(this.saveButton);

        //取消按钮
        this.cancelButton = document.createElement('input');
        this.cancelButton.type = 'button';
        this.cancelButton.value = '取消';
        this.editElement.appendChild(this.cancelButton);
        
        //初始文本状态
        this.converToText()
        this.attchEvents();
    },

    //文本状态
    converToText: function()
    {   
        this.staticElement.style.display = 'inline';
        this.fieldElement.style.display = 'none';
        this.saveButton.style.display = 'none';
        this.cancelButton.style.display = 'none';

    },
    //编辑状态
    converToEdit: function()
    {   
        this.staticElement.style.display = 'none';
        this.fieldElement.style.display = 'inline';
        this.fieldElement.focus();
        this.saveButton.style.display = 'inline';
        this.cancelButton.style.display = 'inline';
    },
    //事件监听
    attchEvents: function()
    {   // this
        this.staticElement.addEventListener('click',()=> {
            this.converToEdit();
        })
        this.saveButton.addEventListener('click',()=> {
            this.save();
        })
        this.cancelButton.addEventListener('click',()=> {
            this.converToText();
        })
    },
    save: function()
    {
        this.value=this.fieldElement.value;
        this.staticElement.innerHTML = this.value;
        this.converToText();
    }
  }

初始化DOM结构:
- createElement方法首先创建一个包含多个子元素的div容器，用于实现就地编辑界面。
- 包括：
  - staticElement（静态元素）: 一个span元素，用于显示原始或已保存的文本内容。
  - fieldElement（字段元素）: 一个文本输入框input，用户在此编辑文本。
  - saveButton（保存按钮）: 一个按钮，点击后保存编辑的内容。
  - cancelButton（取消按钮）: 一个按钮，点击后放弃编辑，恢复原内容。
状态切换方法:
- converToText: 将界面恢复为只读文本状态，隐藏输入框和按钮，显示原始文本。
- converToEdit: 切换到编辑状态，隐藏原始文本，显示输入框并聚焦，以便用户直接开始输入，同时显示保存和取消按钮。
事件绑定:
- attchEvents方法负责为各个元素绑定必要的事件监听器。
  - 当静态文本被点击时，调用converToEdit进入编辑模式。
  - 点击“保存”按钮时，调用save方法保存编辑内容，并恢复到文本展示状态。
  - 点击“取消”按钮时，调用converToText放弃编辑，恢复原始状态。
保存逻辑:
- save方法在用户完成编辑并点击保存时被调用，它会获取输入框中的当前值，更新staticElement的文本内容，并调用converToText恢复到文本展示状态，从而完成编辑过程。

写完了这些之后，我们发现，我们可以正常使用我们的签名

点击保存后我们也可以正常使用

但是！

我们刷新界面后，就会回到之前的状态。这是因为我们的内容，并没有容器去存储它

怎么办呢？

接下来我来介绍一下：HTML5的LocalStorage

HTML5的localStorage是Web存储API的一部分，它提供了一种在用户的浏览器上持久化存储数据的方式。这项技术使得网页可以在用户的设备上存储数据，即使在浏览器关闭后再重新打开，这些数据仍然存在。这对于提升用户体验、实现离线应用功能以及存储用户偏好设置等方面非常有用。

特点：

容量限制：大多数现代浏览器为每个源（协议+域名+端口）分配了至少5MB的存储空间，但具体限制可能因浏览器而异。
数据存活周期：localStorage中的数据没有过期时间，它是永久存储的，除非用户手动清除浏览器数据，或者通过JavaScript代码显式删除。
数据存储形式：数据以键值对的形式存储，键和值都是字符串。如果尝试存储非字符串类型的值，它们会被自动转换成字符串。
同源策略：遵循同源策略，意味着一个源下的网页只能访问自身存储的数据，不能访问其他源下的数据。

我们需要用localstorage来存储我们个性签名

  save:function()
    {
        this.value=this.fieldElement.value;
        this.staticElement.innerHTML = this.value;
        this.converToText();

        localStorage.setItem('signature',this.value);
    }

将'signature'与个性签名值做键对值绑定，传给localstorage

但是在实际开发中，我们需要注意到，可能会出现重名，为了预防这bug，我们需要将'signature'赋给一个变量，让这个变量去进行操作。

<script> 
    const STORAGEKEY = 'signature'
        const signature = localStorage.getItem(STORAGEKEY)|| '这个家伙很懒，什么都没有留下' ;  
        new EditInPlace(STORAGEKEY,document.getElementById('signature'),signature)
    </script>

同时在构造函数上引入该变量

function EditInPlace(storageKey,container,value = '这个家伙很懒，什么都没有留下') {
   /*......*/
    this.storageKey = storageKey;
    
}

若是清空个性签名，我们需要刷新载入空的个性签名的提示词。 location.reload();

save: function()
    {
        this.value=this.fieldElement.value;
        this.staticElement.innerHTML = this.value;
        this.converToText();

        localStorage.setItem(this.storageKey,this.value);
       
        location.reload();
    }

数据就存入了localstorage

注意事项：

隐私与安全：虽然localStorage提供了客户端存储方案，但开发者需要注意，存储在本地的数据容易受到恶意脚本的访问，因此不宜存储敏感信息。
性能考虑：大量数据的读写可能会影响页面性能，特别是在移动设备或低性能设备上。
清理机制：用户可以通过浏览器的隐私设置或使用浏览器自带的清理工具来清除localStorage数据，开发者应提供适当的提示或备份机制。

总的来说，localStorage是增强Web应用功能和提升用户体验的有效工具，但在使用时也需考虑其局限性和潜在的安全风险。

求点赞评论收藏，有问题随时私信博主！

B站必考题！个人主页个性签名实战demo-就地编辑

前言

正文

这个个性签名是直接以span标签的形式展现在页面上