能否用JS/JQuery将Div内容存为文件并加载替换？若不行可用PHP吗？

一、纯前端JS实现（无需后端，本地处理） #

完全可以通过前端JS实现本地保存和加载，不需要后端语言。以下是完整代码：

<div class="etc">
    Content here
</div>
        
<button id="saveBtn">Save Content</button>
<button id="loadBtn">Load Content</button>

<script>
// 保存内容到本地文件
document.getElementById('saveBtn').addEventListener('click', function() {
    // 获取Div内的HTML内容，若要保存纯文本可改用textContent
    const content = document.querySelector('.etc').innerHTML;
    // 自定义文件名和格式，可替换为.txt/.html等
    const fileName = 'div-content.html';
    // 对应文件的MIME类型，txt用'text/plain'，html用'text/html'
    const fileType = 'text/html';

    // 创建Blob对象存储内容
    const blob = new Blob([content], { type: fileType });
    // 生成临时下载链接
    const downloadUrl = URL.createObjectURL(blob);

    // 创建隐藏的a标签触发下载
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();

    // 清理临时资源
    document.body.removeChild(link);
    URL.revokeObjectURL(downloadUrl);
});

// 从本地文件加载内容替换Div
document.getElementById('loadBtn').addEventListener('click', function() {
    // 创建隐藏的文件选择框
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    // 限制可选的文件格式
    fileInput.accept = '.txt,.html';

    fileInput.addEventListener('change', function(e) {
        const selectedFile = e.target.files[0];
        if (!selectedFile) return;

        // 读取文件内容
        const reader = new FileReader();
        reader.onload = function(event) {
            // 替换Div原有内容
            document.querySelector('.etc').innerHTML = event.target.result;
        };
        reader.readAsText(selectedFile);
    });

    // 触发文件选择弹窗
    fileInput.click();
});
</script>

二、PHP后端实现（服务器端存储） #

如果需要将内容保存到服务器，支持跨设备访问，可结合PHP实现：

1. 保存内容到服务器 #

前端代码：

<div class="etc">
    Content here
</div>
        
<button id="saveToServerBtn">Save to Server</button>
<button id="loadFromServerBtn">Load from Server</button>

<script>
// 提交内容到PHP脚本保存
document.getElementById('saveToServerBtn').addEventListener('click', function() {
    const content = document.querySelector('.etc').innerHTML;
    fetch('save-content.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `content=${encodeURIComponent(content)}`
    })
    .then(response => response.text())
    .then(message => alert(message));
});

// 从服务器加载内容
document.getElementById('loadFromServerBtn').addEventListener('click', function() {
    fetch('load-content.php')
    .then(response => response.text())
    .then(content => {
        document.querySelector('.etc').innerHTML = content;
    });
});
</script>

对应的save-content.php脚本：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['content'])) {
    $content = urldecode($_POST['content']);
    // 服务器上的文件存储路径，确保目录有写入权限
    $savePath = 'saved-content.html';
    
    if (file_put_contents($savePath, $content)) {
        echo '内容已成功保存到服务器';
    } else {
        echo '保存失败，请检查文件目录权限';
    }
} else {
    echo '无效请求';
}
?>

对应的load-content.php脚本：

<?php
$savePath = 'saved-content.html';
if (file_exists($savePath)) {
    echo file_get_contents($savePath);
} else {
    echo '暂无已保存的内容';
}
?>

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