移动端搜索历史记录保存问题

**

移动端搜索历史记录保存问题

**

写在前面：简单的实现一下保存搜索历史记录功能

主要使用了MUI框架，zepto库，template模板引擎。
数据库是随便写了一些简单的数据。

思路分析：核心是localStorage，首先定义一个数组，然后将从输入框中获取到的关键字存入数组中，再讲数组存入本地。最后取出数据拿到页面渲染。

HTML结构如下：

需要引入的文件有MUI提供的css和js，zeptojs，和模板引擎templatejs（渲染数据到页面的时候要用）当然还要引入自己写的js文件。注意引用顺序

通过模板引擎渲染后的页面结构放在此盒子中

原生语法的模板引擎代码。

自己写的js页面代码，以下的代码都是在$(function () {})入口函数中的

这里我写了页面跳转为了方便测试，到另一个页面我拿到这边传递的参数从数据库查询数据进行了数据展示，和这个功能其实没有关系，不需要的可以删掉那句跳转语句。（此处的if判断是判断数组中是不是已经包含了之前的关键字，如果已经包含 需要先删除原先的，再追加新的。避免出现重复关键字）

这是通过template把数据和页面联系起来，注意应该放在按钮点击事件外面。

最后还有清空历史记录功能

补充：

localStorage只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现），相同浏览器的不同页面间可以共享相同的 localStorage。生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

使用方法：

localStorage.setItem(“key”,“value”);//以“key”为名称存储一个值“value”

localStorage.getItem(“key”);//获取名称为“key”的值

删除localStorage中存储信息的方法：

localStorage.removeItem(“key”);//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

JSON.stringify 把一个对象转换成json字符串，
JSON.parse 把一个json字符串解析成对象。

mui.alert()是MUI框架提供的弹窗比系统提供的好看很多

关于模板引擎，就麻烦大家自己百度查了哈哈。讲的要很基础的话需要讲一段时间。
今天是第一次写文章，写的不好，欢迎大家批评补充。