如何将JS动态创建的div持久保存到cpanel托管的HTML文件避免刷新丢失

核心逻辑说明 #

你当前用jQuery动态创建的DOM仅保存在浏览器运行内存中，页面刷新后内存清空自然会消失。要实现永久保存，需要把图片对应的结构数据存储到服务端，页面每次加载时主动拉取数据渲染对应div结构即可。你使用的cpanel环境默认支持PHP，不需要额外配置服务，部署成本很低。

分步实现步骤 #

1. 服务端存储接口准备 #

你可以在cpanel文件管理器的网站根目录下新建save_photo.php、get_photos.php两个接口文件，小体量相册直接用JSON文件存储数据即可，不需要额外部署数据库：

• 提前在根目录新建photos.json文件，在cpanel文件管理器中将该文件权限设置为755，保证PHP可读写。

save_photo.php代码示例：

<?php
$input = file_get_contents('php://input');
$data = json_decode($input, true);
// 此处可补全你自己的管理员权限校验逻辑，避免非授权写入
if(isset($data['img_url']) && isset($data['admin_token'])){
    $photos = json_decode(file_get_contents('photos.json'), true) ?: [];
    $photos[] = ['img_url' => $data['img_url']];
    file_put_contents('photos.json', json_encode($photos));
    echo json_encode(['code' => 200, 'msg' => '保存成功']);
}
?>

get_photos.php代码示例：

<?php
header('Content-Type: application/json');
echo file_get_contents('photos.json');
?>

2. 改造上传成功后的JS逻辑 #

原有图片上传成功的回调函数中，除了动态创建div加入页面之外，还需要把新上传的图片信息传给服务端存储：

// 假设该函数为你的图片上传成功回调
function uploadSuccess(newImgUrl) {
    // 先提交数据到服务端存储
    $.ajax({
        url: 'save_photo.php',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            img_url: newImgUrl,
            admin_token: '你自定义的管理员校验令牌'
        }),
        success: function() {
            // 存储成功后再动态插入DOM到页面
            $("<div class='col'><img src='"+ newImgUrl +"' alt='相册图片'></div>").appendTo(".onerow");
        }
    })
}

3. 页面初始化时渲染历史数据 #

页面加载完成后，先拉取服务端存储的所有图片数据，循环生成对应col类的div加入行容器：

$(function() {
    // 页面加载完成后先拉取历史数据渲染
    $.get('get_photos.php', function(photoList) {
        photoList.forEach(function(item) {
            $("<div class='col'><img src='"+ item.img_url +"' alt='相册图片'></div>").appendTo(".onerow");
        })
    }, 'json')
})

注意事项 #

• 如果后续图片体量变大，可以直接替换为cpanel自带的MySQL数据库存储，整体逻辑和上面完全一致，仅需要把读写JSON文件的逻辑替换为数据库操作即可。
• 必须补全管理员权限校验逻辑，避免未授权用户恶意写入数据。

内容的提问来源于stack exchange，提问作者Robert Tudor