这个是我个人生活中的一个小小的案例，由于我最近在找工作，投的简历多了，就很容易弄混淆，我就弄了这个个小东西。
最开始没有实现本地存储的功能的，只是当作一个闭包的案例，具体看这里，但是这样子，一刷新，就会消失不见了，所以我就加入了一个本地存储的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <input type="text" name="" id="text"> <input type="submit" name="" value="添加" id="button"> </form> <ol id="box"> </ol> <script type="text/javascript"> // 获取页面元素 function GetId(id) { return document.getElementById(id) } var button = GetId("button") var text = GetId("text") function getLocalStorage (){ var hasPay_ArrayList = localStorage.getItem("isPayLocal")==""||localStorage.getItem("isPayLocal")=="null"||localStorage.getItem("isPayLocal")==null?[]:localStorage.getItem("isPayLocal").split(","), value = text.value console.log(hasPay_ArrayList) if(hasPay_ArrayList.length){ for (var i = hasPay_ArrayList.length - 1; i >= 0; i--) { var li = document.createElement('li') li.innerHTML = hasPay_ArrayList[i] + '<br>' var box = GetId("box") box.appendChild(li) } } } getLocalStorage()
button.addEventListener('click', function(e) { e.preventDefault() // 获取浏览器本地localStorage，可能是null，可能是“” var hasPay_ArrayList = (localStorage.getItem("isPayLocal")==""||localStorage.getItem("isPayLocal")=="null"||localStorage.getItem("isPayLocal")==null)?[]:localStorage.getItem("isPayLocal").split(",") console.log(hasPay_ArrayList) console.log(localStorage.getItem("isPayLocal")) var value = text.value; var isLive = hasPay_ArrayList.indexOf(value)>=0?true:false; console.log(isLive) if (value && !isLive) { var li = document.createElement('li') li.innerHTML = value + '<br>' var box = GetId("box") box.appendChild(li) text.value = '' var refreshLocalstorage = hasPay_ArrayList.push(value) localStorage.setItem("isPayLocal",hasPay_ArrayList) console.log(hasPay_ArrayList) console.log(localStorage.setItem("isPayLocal",hasPay_ArrayList)) } else if (value&&isLive) { alert("已经投递") }else{ alert("输入不能为空") } text.value='' }) </script> </body> </html>
当然了，既然是完善功能，那么原来的功能也就是不能发生变化的，这个检查是否已经投递的功能还在，这个新增加的存储功能，也是非常的简单的，当然还是可以自己去改变，多多的添加一些新的功能，让这个例子更加的完善，但是我目前就做了这么些的东西。出具雏形，以后再慢慢的添砖加瓦吧