Question

使用HTML5和本地存储，可以使用JavaScript来保存网页的状态吗？

例如，某些网站有increase font size个按钮，很可能是用JS控制的。如何保存属性，以便在刷新时大小保持不变？或者这是在没有JS的情况下完成的吗？

Answer 1

是的，它是用Javascript完成的。你可以使用

Cookies
Sessionstorage

这是一个全局对象（sessionStorage），用于维护在页面会话期间可用的存储区域。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。在新选项卡或窗口中打开页面将导致启动新会话。
Localstorage

localStorage与应用了相同原始规则的sessionStorage相同，但它是持久的。

更好/更容易的是sessionStorage和localStorage。问题是旧浏览器不支持它们。

相反，处理cookie可能是一场噩梦，但它们也适用于旧浏览器。

Answer 2

您最好的选择可能是使用localStorage，除非您不希望设置在新会话中持续存在（在这种情况下您将使用sessionStorage）。如果您有多个设置，则可以存储设置的序列化表示。

E.g。

var settings = {
    fontSize: '11px',
    otherConfig: 'test'
};

localStorage.setItem('settings', JSON.stringify(settings));

//then you can retrieve it
settings = JSON.parse(localStorage.getItem('settings'));

console.log(settings.fontSize); //11px

请注意，如果您希望用户从多台计算机连接时设置仍然存在，则必须使用某些服务器端支持。

Answer 3

是可以将状态保存到localStorage。

假设你有一个对象：

var settingsObj={

   pageClass:'bigFont',
   widgetSortOrder : [1,5,3,7]

}

您可以通过对对象进行字符串化将整个对象保存到一个本地存储密钥。当页面加载时，您将看到localStorage中是否存在该密钥，并让您的javascript根据这些设置执行任何操作

进行字符串化和存储：

localStorage.setItem('mySettings', JSON.stringify(settingsObj) );

从存储中检索并转换为js对象

var settings=JSON.parse(localStorage.getItem('mySettings'));

在本地存储Javascript设置

3 个答案: