web 存储

最新推荐文章于 2023-06-17 00:21:47 发布

原创最新推荐文章于 2023-06-17 00:21:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #存储 #localhost #事件

技术点专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个简单的JavaScript程序，用于通过本地存储管理学生名单。该程序实现了读取、保存及显示功能，利用HTML进行数据展示。

var saveLocalKey = "stuentList";
    //创建HTML标签
 function createHtml() {
        //拿本地数据
        var list = read();
        var allhtml = "";
        for (var i in list) {
            var student = list[i];
            var city = student.Name;
            var cityid = student.Nameid;
            allhtml+=' <div class="citydiv locationcity"  > <span nameid="{{id}}">{{citys}}</span> </div>';
            allhtml=allhtml.replace("{{citys}}",city);
            allhtml=allhtml.replace("{{id}}",cityid);
        }

        $("#cityback").html(allhtml);
    }
function saveLocal(title,id) {
        //先取出原有的数据
        var list = read();
        //添加到末尾
        for (var i in list) {
            var students = list[i];
            if (students.Name == title) {
                return false;
            }
        }

        var student = {
            Name: title,
            Nameid: id
        };
        list.push(student);
        //写回去
        save(list);
    }
    //存数据
    function save(list) {
        if (list.length == 0) {
            localStorage.removeItem(saveLocalKey);
        }
        var listStr = JSON.stringify(list);
        localStorage.setItem(saveLocalKey, listStr);
    }
    //读数据
    function read() {
        var listStr = localStorage.getItem(saveLocalKey);
        var list;
        if (listStr == null) {
            list = [];
        } else {
            list = JSON.parse(listStr);
        }
        return list;
    }

createHtml() ，saveLocal(title,id)；这是封装好的，修改一下参数和html就ok了