索鸟网

  1. 首页
  2. localstorge本地存储的一个小小个人例子

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>

也是非常的简单的,当然还是可以自己去改变,多多的添加一些新的功能,让这个例子更加的完善,但是我目前就做了这么些的东西。出具雏形,以后再慢慢的添砖加瓦吧

相关标签: JavaScript

来源地址:http://www.imooc.com/article/20306 版权归作者所有!

相关教程

  • wxPython的一个简单例子

    简介 wxPython是python众多的GUI平台的其中一个。其他的平台有如Tkinter,PythonWin,Java Swing,PyGTK,PyQt等。按照个人喜好选择一款或多款GUI平台使用。 下载安装wxPython pip install wxPython 简单示例 #!/usr/bin/python3 import wx WIN_NAME = "
  • 一个grep使用正则表达式的例子

    cat bookmarks_2017_8_9.html | grep -o '\http[^\"]*\>"' \http[^\"]*\>" 分为三部分: \http :以http为开头 [^\"]* :排除掉字符串中的" \>" :以"结尾 -o 只显示匹配的字符串 bookmarks_2017
  • 本地存储,cookie,session,stroge

    本地存储的方案 传统的存储: cookie:把信息存储到客户端的浏览器中,服务器端可以获取,不是严禁的本地存储; session:把信息存储到服务器上的;(服务器存储) h5存储:webstorage localStorage:永远的存储到客户端的本地;(信息永久存在,除非手动清除缓存) sessionStorage:临时的会话存储,只要当前页面不关闭,信息就会存在,页
  • 浅谈 : web 前端本地存储

    前端的本地存储方式有:localStorage、sessionStorage、cookie、webSQL、indexedDB等 cookie : 用于客户端数据的存储,在客户端请求服务端,使用response向客户端浏览器发送一个cookie,当客户端再次访问该网站的时候,浏览器会把请求的地址和cookie数据一起提交给服务器,服务器检查该cookie,
  • JavaScript学习篇--本地存储

    在客户端运行的js是不能操作用户电脑磁盘中的文件的(这是为了保护客户端运行的安全)。 1、js中的本地存储: 使用js向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息。 本地存储的方案: 传统: cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取c
  • 用本地存储实现翻页的效果

    需求是这样的 点击数字或者点击上一页、下一页等,翻页栏样式变化及从后台加载相应数据。 加入总共20页,只显示10个数字按钮,以及下一页,上一页等。 当从后台加载的页id>=6和<=16时,第六个数字按钮总是显示当前的加载的页,效果如下 <!DOCTYPE html> <html lang="en"> <head>
  • python下代码优化的一个例子

       编程不是简单的堆砌代码,编写过程中也需要考虑执行效率,假如一段代码的计算复杂度较高,数据量一大就很难在有限时间内得到合理的结果,因此需要在编写代码的时候,尽量考虑计算的复杂度,减少无效的循环,多采用简单运算指令,减少逻辑判断,减少嵌套,在此基础上再考虑代码的可读性,以便于团队合作。   最近碰上一个例子,有一个人提出了一个很小的需求:
  • 本地存储——Cookie与Web Storage

    Cookie cookie是客户端用来存储数据的,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送 Web Storage html5标准中的Web Storage包括了两种存储方式:sessionStorage和localStoragesessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个