LocalStorage效果很好.无需在同一页面上显示.我希望将此数据显示到Div的下一个HTML页面中



localstorage效果很好。.不需要在同一页面中显示。我希望将此数据显示到下一个html页面中,div?

尝试以Div#ID不错的方式显示在下一个HTML页面中显示。每当我想调用相同数据并显示任何HTML页面?

<form id="logForm" method="post">
    <input type="text" name="project" value="Project Name">
    <input type="number" name="hours" value="Hours" class="shortField">
    <input type="text" name="date" value="Date" class="shortField">
    <input type="submit" value="Log Time">
</form>
<ul id="theLog">
    <li>Loading&hellip;</li>
</ul>
<script>
$(document).ready(function() {
    if (typeof(localStorage) == 'undefined' ) {
        alert('Your browser does not support HTML5 localStorage. Try upgrading.');
    } else {
        getAllItems(); //load the items
        $("#logForm").submit(function(){
            var newDate = new Date();
            var itemId = newDate.getTime();
            var values = new Array();
            var project = $("input[name='project']").val();
            var hours = $("input[name='hours']").val();
            var date = $("input[name='date']").val();
            //strip html tags
            project = project.replace(/(<([^>]+)>)/ig, "");
            values.push(project);
            values.push(hours);
            values.push(date);
            if (project != "" && hours != "" && date != "") {
                try {
                    localStorage.setItem(itemId, values.join(';'));
                } catch (e) {
                    if (e == QUOTA_EXCEEDED_ERR) {
                        alert('Quota exceeded!');
                    }
                }
            } else {
                alert("All fields are required.");
            }
        });
    }
});
function getAllItems() {
    var timeLog = ""; //the variable that will hold our html
    var i = 0;
    var logLength = localStorage.length-1; //how many items are in the database starting with zero
    //now we are going to loop through each item in the database
    for (i = 0; i <= logLength; i++) {
        //lets setup some variables for the key and values
        var itemKey = localStorage.key(i);
        var values = localStorage.getItem(itemKey);
        values = values.split(";"); //create an array of the values
        var project = values[0];
        var hours = values[1];
        var date = values[2];
        //now that we have the item, lets add it as a list item
        timeLog += '<li><strong>'+project+'</strong>: '+hours+' hours - '+date+'</li>';
    }
    //if there were no items in the database
    if (timeLog == "")
        timeLog = '<li class="empty">Log Currently Empty</li>';
    $("#theLog").html(timeLog); //update the ul with the list items
}
</script>

将数据存储到本地存储中后,您可以从在同一浏览器中打开的任何页面访问此数据(因为本地存储属于您的浏览器,实际上所有数据都存储在浏览器中空间,您无法从任何其他浏览器中访问一个浏览器中的数据存储)。谢谢

最新更新