你不知道的前端小知识(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;
}
今天大致就分享这些,得全部过一遍基础知识。加油,正在路上~