Javascript 保存数据<；李>；包括<；部门>；使用本地存储

我尝试创建本地存储数据来创建文件夹，我正处于学习阶段

用于创建我的文件夹的图像

在JSFIDLE中，我只需保存2个元素中的1个，

或
，在第一次提交时，输入值不会出现在div中


var计数=1；
//生成一个函数，返回具有更新计数的DOM
函数getNewList（）{
让标签=计数++；
var addFolder='
'+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“
”；
返回addFolder；
}
//让我们使用submit保存它们。
$（“.submitButton”）。单击（函数（）{
var inputan=$（“#input_nameFolder”）.val（）；
$（'.nav li:last'）.find（'a'）.html（inputan.focus（）；
document.getElementById（“input_nameFolder”）.value=“”；
//更新结果数组
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果==null）
结果=[]；
结果：推({
文件夹：getNewList（），
名称文件夹：inputan
});
//保存新的结果数组
setItem（“folderList”，JSON.stringify（result））；
//追加新的li
$（“.nav”）.append（$（getNewList（））；//这里我想要显示div include输入值
});
//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果！=null）{
对于（变量i=0；i



编辑

如果您将以前的HTML存储在
localstorage
中，请务必重新加载页面两次，因为它的HTML结构可能错误，我添加了
localstorage.removietem（'folderList'）
在fiddle脚本的末尾，要清除以前保存的
HTML
，您应该在脚本中使用时将其删除，或者您可以使用下面提供的代码块，而不是从fiddle复制


首先，你的小提琴有错误的脚本加载顺序

说到这个问题，您每次从
localStorage
加载时都会追加
HTML
，这将在您重新加载页面时继续追加菜单，正如您所说，您正在学习，因此我将继续编写代码，以便您将更改与脚本进行比较

不要让事情变得复杂，你应该保持简单，尤其是在开始学习的时候

在获取
HTML
后，您将单独添加文件夹名称，而您可以在函数
getNewList
中传递名称，以生成
HTML
以及文件夹名称，并在循环中添加它们，请参见下面的代码和代码引用

var count = 1;

    // make a function that returns the DOM with updated count
    function getNewList(foldername) {
        let label = count++;
        var addFolder = '<li>' +
            '<div class="zf-folder" style="width: 232px;">' +
            '<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">' +
            '<div class="_sideFolder"></div>' +
            '<div class="_iconText" style="width: 215px">' +
            '<div class="ellipsis">' +
            '<div class="_iconFolder">' +
            '<div class="_icon-col">' +
            '</div>' +
            '</div>' +
            '<a href="#folder' + label +
            '" data-toggle="tab" style="text-decoration: none;"><span class="hyperspan" style="width:100%; height:100%; left:0; top:0;">' +
            foldername + '</span></a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</li>';
        return addFolder;
    }


    $(".submitButton").click(function () {
        var inputan = $("#input_nameFolder").val();

        // update the result array
        var result = JSON.parse(localStorage.getItem("folderList"));

        if (result == null) {
            result = [];
        }

        let newfolderHTML = getNewList(inputan);

        result.push({
            folder: newfolderHTML
        });

        // save the new result array
        localStorage.setItem("folderList", JSON.stringify(result));

        // append the new li
        $(".nav").append(newfolderHTML); // i want include myDiv

        //clear input 
        $("#input_nameFolder").val('');
    });

    // on init fill the ul
    var result = JSON.parse(localStorage.getItem("folderList"));
    if (result != null) {
        //get the nav reference in DOM
        let nav = $(".nav");

        //clear the html contents
        nav.html('');

        for (var i = 0; i < result.length; i++) {
            var item = result[i];
            nav.append(item.folder);
        }
    }

var计数=1；
//生成一个函数，返回具有更新计数的DOM
函数getNewList（foldername）{
让标签=计数++；
var addFolder='
'+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“
”；
返回addFolder；
}
$（“.submitButton”）。单击（函数（）{
var inputan=$（“#input_nameFolder”）.val（）；
//更新结果数组
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果==null）{
结果=[]；
}
让newfolderHTML=getNewList（inputan）；
结果：推({
文件夹：newfolderHTML
});
//保存新的结果数组
setItem（“folderList”，JSON.stringify（result））；
//追加新的li
$（“.nav”）.append（newfolderHTML）；//我想要包含myDiv
//清晰输入
$（“#输入名称文件夹”）.val（“”）；
});
//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果！=null）{
//在DOM中获取导航引用
设资产净值=$（“.nav”）；
//清除html内容
html（“”）；
对于（变量i=0；i
如果我真的了解你。我想，你的问题解决了。我在整个项目中都使用OOP。请试试这个

/*
 * @params data 'object'
 * @date 01.12.2017
 * Create Template
 *
 */
 function getNewList(data) {
     var addFolder = '<li>' +
            '<div class="zf-folder" style="width: 232px;">' +
                '<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">' +
                    '<div class="_sideFolder"></div>' +
                    '<div class="_iconText" style="width: 215px">' +
                        '<div class="ellipsis">' +
                            '<div class="_iconFolder">' +
                                '<div class="_icon-col">' +
                                '</div>' +
                            '</div>' +
                            '<a href="#folder' + data.id + '" data-toggle="tab" style="text- decoration: none;">' +
                                '<span class="hyperspan" style="position:absolute; width:100%; height:100%; left:0; top:0;">'+ 
                                    data.value +
                                '</span>'
                            '</a>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</li>';
  return addFolder;
 }

/*
* @params storageName 'string'
* @date 01.12.2017
* Get Storage
* It get storage according to parameter.
*
*/
function getStorage(storageName) {
    if(typeof storageName === 'string') {
        var result = JSON.parse(localStorage.getItem(storageName));
            if (result == null)
                return result = [];
            else
                return result;
    }
}

/*
* @params storageName 'string', data 'object'
* @date 01.12.2017
* Get Storage
*
*/
function setStorage(storageName, data) {
    if(typeof storageName === 'string', Array.isArray(data)) {
        localStorage.setItem(storageName, JSON.stringify(data));
        return true;
    }
}

/*
* @params storage 'array', value 'any'
* @date 01.12.2017
* Create Data
*
*/
function createObject(storage, value) {
    if(Array.isArray(storage) && (value !== '' || value !== 'undefined' )) {
        var data = {
            id: storage.length,
            value: value
        }
        storage.push(data);
        return storage;
    }
}  

/*
* 
* @date 01.12.2017
* Clic Action
*
*/
$(".submitButton").click(function() {
    var elm = $("#input_nameFolder"),
        inputan = elm.val(),
        storageName = 'folderList',
        storage = getStorage(storageName),
        data = createObject(storage, inputan);

    var response = setStorage(storageName, data);

    if(response) {
        elm.val('');
        resultBind(storageName);
    }
});

/*
* @params storageName 'string'
* @date 01.12.2017
* Html Bind at Data
*/
function resultBind (storageName) {
    var result = getStorage(storageName);
    if (result != null) {
        for (var i in result) {
            var item = result[i];
            $(".nav").append(getNewList(item)); // i want include input result, 
        }
    }
}

/*
*@params数据“对象”
*@日期2017年12月1日
*创建模板
*
*/
函数getNewList（数据）{
var addFolder='
'+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“
”；
返回addFolder；
}
/*
*@params-storageName'string'
*@日期2017年12月1日
*获取存储
*它根据参数得到存储。
*
*/
函数getStorage（storageName）{
如果（storageName的类型=='string'）{
var result=JSON.parse（localStorage.getItem（storageName））；
如果（结果==null）
返回结果=[]；
其他的
返回结果；
}
}
/*
*@params storageName“字符串”，数据“对象”
*@日期2017年12月1日
*获取存储
*
*/
函数设置存储（存储名称、数据）{
if（存储名称的类型=='string'，Array.isArray（数据））{
setItem（storageName，JSON.stringify（data））；
返回true；
}
}
/*
*@params存储“数组”，值“any”
*@日期2017年12月1日
*创建数据
*
*/
函数createObject（存储，值）{
if（Array.isArray（存储）&（值！=''| |值！=''未定义'））{