如何将元素转换为可以从localStorage存储和还原的字符串 [英] How to convert an element to a string that can be stored and restored from localStorage

问题描述

我的计划是在元素被读取一次后将其存储在localStorage中(对于在线应用程序–我认为，如果能够使其正常运行，它将大大加快我的应用程序的运行速度).所以我想出了以下内容，但是内容似乎要么被存储要么作为空返回.现在，我认为一个元素从根本上来说是一个字符串，因此我无需对其进行任何处理即可将其存储在localStorage中，但显然不是.有谁知道是否有可能实现我想要的?

My plan is to store my elements in localStorage once they've been read once (for an online app – I figure that if I can get it to work it will speed up my app significantly). So I came up with the following, but the contents seem to either be stored or come back as null. Now I thought that an element was fundamentally a string so I wouldn't have to do anything with it to store it in localStorage, but apparently not. Does anyone know if it's possible to achieve what I want?

如果您想旋转一下，则需要一个保存html的小文件传递给它.内容并不重要.第一次运行if (content)时将评估为false.下次为true时，我添加了.clear()使其交替显示.第三次showSource函数将填充id=localor元素(需要与id=content元素或您选择填充的任何其他元素分开)，在"from File"之后显示空值.

If you want to take it for a spin then you'll need a small file holding html to pass to it. The contents aren't important. The first time it runs if (content) will evaluate to false. The next time true and I added the .clear() to make it alternate. The third time the showSource function will populate the id=localor element (which will need to be separate from the id=content element or whatever other element you choose to populate) showing the null after "from File ".

function showSource(source) {   //Function and related element only here for testing
    $("#localor").html("<p>"+source+"</p>");
}

//local is the name of the localStorage element
//id is the id of the element in the main form
//source is where the content for the element originates.
    function loadElement(local, id, source) {   

//This is the generic script for attempts to load an element.

        content = localStorage.getItem(local); //Try to load from local storage
    if (content) {//If found
        $(id).html(content);
        showSource("from Local " + content);    //Added only for testing
        localStorage.clear();   //Added only for testing
        //load into the #content element
    } else {//Not found
        $(id).load(source);
        showSource("from File " + content); //Added only for testing
        //so load it from the server..
        localStorage.setItem(local,$(id).html());
        //then save it to the local storage, so we don't have to do this again any time soon.
    }
}


$(document).ready(function() {
    loadElement("login.1001", "#content", "login.html");
});

请帮助.

谢谢.

推荐答案

您正在执行的操作不起作用的原因是，您在加载项目之前先将其保存. load与所有(合理的)ajax调用一样，异步工作.调用load时，进程开始，但稍后完成.然后，您的代码将继续并获取其认为是内容的内容并保存，但内容尚不存在.

The reason what you're doing doesn't work is that you're saving the item before it's loaded. load works asynchronously, like all (reasonable) ajax calls. The process starts when you call load, but finishes later. Your code is then continuing and grabbing what it thinks is the content and saving it, but the content isn't there yet.

使用回调:

$(id).load(source, function() {
    showSource("from File " + content); //Added only for testing
    //so load it from the server..
    localStorage.setItem(local,$(id).html());
    //then save it to the local storage, so we don't have to do this again any time soon.
});

---

但是...您不只是在重新设计浏览器缓存吗?

---

But...aren't you just reinventing the browser cache?

这篇关于如何将元素转换为可以从localStorage存储和还原的字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！