2021-06-11

你不知道的前端小知识（2）

今天再来看几个有关HTML5的前端小知识。

1.HTML5新增web存储

早些时候，cookie是一个较为方便的web存储，但存储空间较小，大致只有4k。

现在新增了，localStorage和sessionStorage客户端存储的俩个对象。

• localStorage - 用于长久的保存整个网站的数据。保存的数据没有过期时间，可以手动去处。
• sessionStorage - 用于临时保存同一窗口（或标签页）的数据，在窗口关闭之后，将会删除这些数据。

对应的API有：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

【注意】sessionStorage 如果是通过 标签页，右键【复制】出的一个新的标签页，那么sessionStorage也是会【同步的复制】过去。本地已测试，确实已复制。可本地自己按照上方的API模拟。

如果新打开一个标签页，复制链接打开，sessionStorage会消失。

2.SVG和Canvas的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 则是通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，意味着 SVG DOM 中的每个元素都可用，你可以为每个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas适合图像密集型的游戏，因为很多对象会被频繁绘制，并且可以通过jpg，png保存图像，不支持事件处理器，依赖分辨率。文本渲染能力弱。

SVG则和Canvas上述特点相反。不适合游戏应用，最适合带有大型渲染区域的应用程序（比如地图），支持时间处理器，不依赖分辨率。

3.用div模拟一个textarea的实现

这个主要用到了 contentEditable 的属性。另外再添加css，就可以以假乱真。直接上代码

// html react写法
    <div
        id="textarea_test"
        className="textarea"
        contentEditable={true}
        placeholder="请输入内容"
        onClick={onChange}
      ></div>
      <button onClick={onChange}>get divtextarea content</button>

// onchange方法，获取到div中的值 
    const onChange = () => {
        let dom = document.getElementById('textarea_test');
        console.log(dom?.innerHTML);
  };

// css 样式

.textarea {
  height: 200px;
  width: 300px;
  padding: 4px;
  border: 1px solid #888;
  //   resize: vertical;
  resize: both; // 也就是右下角的那个可以更改大小的小三角
  overflow: auto; // 这一行也不能缺少
}

.textarea:empty:before {
  content: attr(placeholder);
  color: #bbb;
}

button {
  margin-top: 10px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

今天大致就分享这些，得全部过一遍基础知识。加油，正在路上～