导航网站项目文档

1.设计图的制作

在线预览：

https://www.figma.com/file/88SrPUgkaAbiKMhknOWXCH/Nav?type=design&node-id=0-1&mode=design&t=TvxOX33fZcG1ChS7-0

2.项目中遇到的小技巧

1.input/button这些元素默认就有一些css，例如：为input添加border-radius时需要将其border: none;或者覆盖

2.一般情况下不允许内联元素包住块级元素，但是<a/>标签支持

<!-- a标签包裹display: block;块级元素 -->
<a href="https://github.com/">
   <div class="site">
      <div class="logo">G</div>
      <div class="link">github.com</div>
   </div>
</a>

3.JSON实现 字符串String和对象Object 相互转换

//将对象变为字符串
const str = JSON.stringify(obj)

//将字符串变为对象
const obj = JSON.parse(str);

3.localStorage本地存储

存储思路：

我们将新创建的网站信息放入一个hashMap中，触发window.onbeforeunload事件，在页面关闭或刷新时使用localStorage进行存储。在下次进入页面时读取localStorage中hashMap数据进行渲染，达到保存新建网站信息存储的效果。那么localStorage能存储多久呢？

存储时间：

一般情况下localStorage中的数据会存到不能继续存或者用户主动删除浏览器数据。无痕窗口的数据只存在于用户使用的这一段时间，当用户关闭页面localStorage中的数据就会被清空。

1.清除cookie及其他数据，会清空localStorage数据

2. 使用无痕窗口访问页面

4.一键式导航网站实现功能及github上传

功能：

1.搜索栏进行搜索

2.键盘按下网站首字母自动跳转

3.实现新增网站 和 鼠标经过删除网站

技术栈：

jQuery / CSS 布局 / 媒体查询
localStorage / SVG Symbols / iconfont.cn / 阻止冒泡 / JSON 序列化

在线查看：

一键式导航网站