localstorge实现本地存储

这个是我个人生活中的一个小小的案例，由于我最近在找工作，投的简历多了，就很容易弄混淆，我就弄了这个个小东西。

最开始没有实现本地存储的功能的，只是当作一个闭包的案例，具体看这里，但是这样子，一刷新，就会消失不见了，所以我就加入了一个本地存储的功能

<!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>

当然了，既然是完善功能，那么原来的功能也就是不能发生变化的，这个检查是否已经投递的功能还在，这个新增加的存储功能，也是非常的简单的，当然还是可以自己去改变，多多的添加一些新的功能，让这个例子更加的完善，但是我目前就做了这么些的东西。出具雏形，以后再慢慢的添砖加瓦吧

posted @ 2017-09-09 21:54  阿柴与米  阅读(498)  评论(0)  编辑  收藏  举报