H5提供了localStorage特性，可以在本地存储数据，localStorage能够存储5M大小的数据，但是在不同的浏览器中有所差异。它以键值对的形式存储，值只能是标准JSON格式的数据，存储时可以用JSON.stringfy()转换一下，取时再用JOSN.parse()。这里我对localstorage做了一个简单的封装，通过原生js操纵DOM实现了手机通讯录效果。
一、通过es6的class新建一个类
初始给localstorage保存了三条数据，通过new AddressBook()可以创建一个通讯录对象，对象原型上包含了保存、新增、删除、返回通讯录列表等方法
1 Contact.js
2
3 class AddressBook{
4 constructor(){
5 const initData = [
6 {name:'张三',phone:'13467601369'},
7 {name:'李四',phone:'13467601369'},
8 {name:'赵五',phone:'13467601369'},
9 ]
10 this.contactList = localStorage.contactList ? JSON.parse(localStorage.contactList) : initData
11 this.save()
12 }
13 save(){
14 //进行本地存储
15 localStorage.contactList = JSON.stringify(this.contactList)
16 }
17 add(name,phone){
18 //新增联系人
19 const contact = { name,phone }
20 this.contactList.push(contact)
21 this.save()
22 }
23 delete(index){
24 //删除联系人
25 this.contactList.splice(index,1)
26 this.save()
27 }
28 search(condition){
29 //按条件进行搜索，不管输入的是姓名还是电话号码，都可进行匹配
30 const reg = new RegExp(condition)
31 return this.contactList.filter( item => reg.test(item.name) || reg.test(item.phone))
32 }
33 getAllData(){
34 //返回所有数据
35 return this.contactList
36 }
37 }
二、原生js进行数据渲染
1 <div id="container">
2 <div class="search">
3 <input type="text" placeholder="搜索联系人">
4 </div>
5 <div class="addr-list">
6 <ul class='menu'></ul>
7 </div>
8 <div class="footbar">
9 姓名<input type="text" name="enter-name">
10 号码<input type="text" name="enter-phone">
11 <button>添加</button>
12 </div>
13 </div>
1 render.js
2
3 const menu = document.querySelector('.menu'),
4 search = document.querySelector('.search>input'),
5 enterName = document.querySelector('input[name=enter-name]'),
6 enterPhone = document.querySelector('input[name=enter-phone]'),
7 addBtn = document.querySelector('.footbar>button')
8
9 //创建通讯录对象
10 const addressBook = new AddressBook()
11 //从localstorage里面获取联系人列表
12 let contactList = addressBook.getAllData()
13
14 function init(){
15 if( contactList.length > 0 ){
16 contactList.forEach( (item,index) => {
17 const li = getLiEle({
18 name:item.name,
19 phone:item.phone,
20 index
21 })
22 menu.appendChild(li)
23 })
24 }
25 }
26 init()
27
28 function getLiEle(data){
29 //创建联系人节点
30 const { name, phone, index } = data
31 const li = document.createElement('li')
32 const delDiv = document.createElement('div')
33 const nameDiv = document.createElement('div')
34 const phoneDiv = document.createElement('div')
35
36 delDiv.innerHTML = '-'
37 nameDiv.innerHTML = name
38 phoneDiv.innerHTML = phone
39
40 li.classList.add('item')
41 delDiv.classList.add('del')
42 nameDiv.classList.add('name')
43 phoneDiv.classList.add('phone')
44
45 delDiv.onclick = function(){
46 menu.removeChild(li)
47 addressBook.delete(index)
48 }
49
50 li.appendChild(delDiv)
51 li.appendChild(nameDiv)
52 li.appendChild(phoneDiv)
53
54 return li
55 }
56
57 function addContact(){
58 //增加联系人
59 const name = enterName.value
60 const phone = enterPhone.value
61 if( !name || !phone ) return
62 //添加到页面
63 const li = getLiEle({name,phone})
64 menu.appendChild(li)
65 //添加到localstorage
66 addressBook.add(name,phone)
67 }
68
69 addBtn.addEventListener('click',addContact)
70
71 //搜索联系人，模糊搜索
72 let timer = 0
73 search.oninput = function(e){
74 //防抖，待输入停止后再搜索
75 clearTimeout(timer)
76 timer = setTimeout(()=>{
77 const res = addressBook.search(search.value)
78 if( res.length > 0 ){
79 res.forEach( (item,index) => {
80 const li = getLiEle({
81 name:item.name,
82 phone:item.phone,
83 index
84 })
85 menu.appendChild(li)
86 })
87 }else{
88 menu.innerHTML = ''
89 }
90 if(!search.value){
91 menu.innerHTML = ''
92 init()
93 }
94 },200)
95 }
三、效果图
实例地址：www.tyjswk.top/others/addressBook/index.html