我有一个让我可以编辑页面正文的Java脚本书签小程序: document.body.contentEditable = true;

我想做一个书签,允许我保存这些编辑,这样如果我刷新页面,它将保留它们,或当我单击书签时将它们显示出来.

我知道本地存储存在,但我不确定如何使用本地存储更新相应的元素.

有什么主意吗?

推荐答案

以下是ChatGPT3.5‘S对这个问题的准确回答. 要在Web应用程序中跨页面刷新保存文档正文编辑,通常需要使用某种形式的数据持久性.有几种方法可以实现这一点,具体取决于您的需求和您正在使用的技术堆栈.以下是一些常见的方法:

  1. Local Storage:在客户端可以使用JAVASCRIPT中的localStoragesessionStorage接口来存储数据.即使刷新页面,此数据也将持续存在.下面是一个简化的例子:

    // Save data to local storage
    localStorage.setItem('documentContent', document.body.innerHTML);
    
    // Retrieve data from local storage
    var savedContent = localStorage.getItem('documentContent');
    if (savedContent) {
      document.body.innerHTML = savedContent;
    }
    

    在使用本地存储存储敏感信息时要小心,因为同一个域上的JavaScript可以访问它.

  2. Cookies:您可以使用Cookie在客户端浏览器上存储少量数据.Cookie会随您网站的每个HTTP请求一起发送.但是,它们有大小限制,不适合存储大型文档正文.

  3. Server-Side Storage:如果您需要存储更大或更关键的数据,请考虑将其保存在服务器上.当用户编辑文档时,将更改发送到服务器并将其存储在数据库中.刷新页面时,从服务器检索数据并使用保存的内容填充文档.

    要实现这一点,您通常会使用服务器端语言(例如,PHP、Python、Node.js)和数据库(例如,MySQL、MongoDB)来存储和检索文档内容.

  4. Web Storage APIs:除了本地存储和会话存储,您还可以使用较新的Web存储技术,如IndexedDB或WebSQL,以满足更高级的客户端存储需求.它们更强大,但学习曲线更陡峭.

  5. Client-Side Frameworks:如果您使用的是像React、Angel或Vue.js这样的JavaScript框架,则可以使用其内置的状态管理和数据存储机制来管理应用程序中的状态,并在刷新过程中持久化数据.

  6. Cookies:您可以使用Cookie在客户端存储小块数据.但是,它们有大小限制,不适合存储大型文档正文.

请记住,方法的 Select 取决于您的特定用例,例如文档内容的大小、安全要求以及您是否需要跨多个设备或用户同步数据.每种方法都有它的优缺点,所以 Select 最适合你需要的一种.

Javascript相关问答推荐

Angular material -在收件箱视图中显示不同的文本,而不是 Select 的选项

将未等待的未处理的错误promise 转变为警告@ changeTicksAndRejections(由当时的抛出错误创建)

如何避免使用ajax在Vue 3合成API中重定向

如何循环访问对象数组并以关键值形式获得结果?

React对话框模式在用户单击预期按钮之前出现

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗?

调用removeEvents不起作用

在这种情况下,如何 for each 元素添加id?

google docs boldText直到按行执行应用脚本错误

在react js中使用react—router—dom中的Link组件,分配的右侧不能被 destruct ''

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

处理时间和字符串时MySQL表中显示的日期无效

简单的PayPal按钮集成导致404错误

Eval vs函数()返回语义

禁用.js文件扩展名并从目录导入隐式根index.js时,找不到NodeJS导入模块

第二次更新文本输入字段后,Reaction崩溃

TinyMCE 6导致Data:Image对象通过提供的脚本过度上载

如何在Press上重新启动EXPO-AV视频?

P5JS-绘制不重叠的圆

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?