用于保存 Javascript 更改的 HTML5 Web Storage API答案

【问题标题】：HTML5 Web Storage API to save Javascript changes用于保存 Javascript 更改的 HTML5 Web Storage API
【发布时间】：2013-03-15 09:20:48
【问题描述】：

我有一个包含三个按钮的 HTML5 页面。这些按钮改变了我页面上的各种内容。例如，第一个将隐藏一个 div，第二个用于将视频播放器更改为随机颜色，第三个用于循环浏览文件夹中的背景图像。

这是带有侧面菜单按钮的页面（部分隐藏）：http://www3.carleton.ca/clubs/sissa/html5/video.html

我的任务希望我们在离开页面和返回时使用网络存储 API 来保存任何更改。因此，如果我将视频播放器更改为红色并关闭窗口，当我打开窗口时，视频播放器将保持红色。

这可能吗？

这是每个按钮的JS：

// Side Menu Function 1
function wideScreen(){
    sidebar = document.getElementById('sidebar');
    banner = document.getElementById('top_header'); 
    body = document.getElementById('body_div');

    if(sidebar.style.display != 'none'){
            sidebar.style.display = ('none');
            banner.style.display  = 'none';
            body.style.marginTop = ('80px');
        }else{
            sidebar.style.display = ('block');
            banner.style.display = 'block';
            body.style.marginTop = ('220px');

        }
    }

//Side Menu Function 2
var dfault = false   
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}
function randFrame(){
    vid = document.getElementById("video_container");
    c = document.getElementById('controls');

    if(!dfault){
        vid.style.backgroundColor  = get_random_color();
        c.style.backgroundColor = vid.style.backgroundColor;
        c.style.backgroundImage = 'none'; 

    }else{
        vid.style.backgroundColor = ('black');
        c.style.backgroundImage = "url('images/bg/bg4.jpg')";
        c.style.backgroundColor = 'none';
    }

    dfault = !dfault
}

//Side Menu Function 3
function randNum(){
    num=Math.floor((Math.random()*13)+1); 
    return num;   
}
function randBG(){
    b = document.getElementsByTagName('body');
    b[0].style.background = "url('images/bg/bg"+randNum()+".jpg') no-repeat center center fixed"
}

【问题讨论】：

标签： javascript html web-storage

【解决方案1】：

您可能想阅读 `localstorage'。一个好的页面在：

http://diveintohtml5.info/storage.html

因此，您可以创建一个密钥/对，或在点击时更新：

所以要阅读它，您可以执行以下操作：

var mystore = localStorage.getItem("sidebar");

要设置它，你可以这样做：

localStorage.setItem("red", mystore);

因此，在加载时，查找键，如果它们存在，设置元素，并在每次点击时创建/更新存储。

【讨论】：