localStorage没有设置

任何人都可能会建议为什么下面的代码不会存储样式表的选择。localStorage没有设置

的settings.php

<?php 
session_start(); 
?> 
<!doctype html> 
<html> 
<head> 
<script type="text/javascript"> 
function changeStyle(title) { 
var lnks = document.getElementsByTagName('link'); 
for (var i = lnks.length - 1; i >= 0; i--) { 
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) { 
lnks[i].disabled = true; 
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false; 
}}} 
function getActiveStyleSheet() { 
var i, a; 
for(i=0; (a = document.getElementsByTagName("link")); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 
    && a.getAttribute("title") 
    && !a.disabled) return a.getAttribute("title"); 
    } 
    return null; 
} 
localStorage.setItem('activeStylesheet', getActiveStyleSheet()) 
</script> 
<meta charset="utf-8"> 
<title>Intapp.Com</title> 
<link rel="stylesheet" type="text/css" href="dwcss.css"> 
<link rel="alternate stylesheet" type="text/css" title="girly" href="style1.css"> 
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css"> 
<link rel="alternate stylesheet" type="text/css" title="neutral" href="style2.css"> 
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0"> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
</head> 
<body> 
<div class="header"> 
<h1> User Settings </h1> 
</div> 
<div id="box2"> 
To change to this style click here 
<button onclick="changeStyle('girly')">Girly</button> 
<button onclick="changeStyle('default')">Default</button> 
<button onclick="changeStyle('neutral')">Neutral</button> 
</div> 
<div class="footer"> 
</div> 
</body> 
</html>

这就是我试图当我在浏览器中默认stylsheet上的index.php激活的测试来检索本地存储的价值，我看不出有什么我”如果任何人都可以帮助我，我会非常感激。

的index.php

<html> 
<head> 
<script> 
window.onload=setstyle() 
{ 
localStorage.getItem('activeStylesheet') 
} 
</script> 
<meta charset="utf-8"> 
<link rel="apple-touch-startup-image" href="appsplash.png"> 
<title>Intapp.Com</title> 
<link rel="stylesheet" type="text/css" href="dwcss.css"> 
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css"> 
<link rel="alternate stylesheet" type="text/css" title="neutral" href="style2.css"> 
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0"> 
<link rel="apple-touch-icon" href="applogo.png"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
</head>

来源

2013-03-18 maccame

更换哪里' setstyle'定义了吗？ – 2013-03-18 20:08:17

我认为大括号中的东西组成了函数 – maccame 2013-03-18 22:34:10

只有在使用'function'关键字（例如'window.onload = function（）{...}'或'window.onload = function setstyle（）{。 ..}'）。 – 2013-03-18 22:48:42

在getActiveStylesheet，您的for循环设置a到document.getElementsByTagName("link")每次迭代，而你应该通过它迭代：也

function getActiveStyleSheet() { 
    var lnks = document.getElementsByTagName('link'); 
    for (var i = lnks.length - 1; i >= 0; i--) { 
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title') && !lnks[i].disabled) { 
     return lnks[i].getAttribute("title"); 
    } 
    } 
    return null; 
}

，而不是在页面加载时设置activeStylesheet，每次更改样式时都应该设置它，即在changeStyle的末尾：

function changeStyle(title) { 
    var lnks = document.getElementsByTagName('link'); 
    for (var i = lnks.length - 1; i >= 0; i--) { 
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) { 
     lnks[i].disabled = true; 
     if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false; 
    } 
    } 
    localStorage.setItem('activeStylesheet', getActiveStyleSheet()) 
}

在index.php文件，应该有代码，以实际设置风格，比如：

window.onload = function() { 
    var 
    lnks = document.getElementsByTagName('link'), 
    activeStylesheet = localStorage.getItem('activeStylesheet'); 
    for (var i = lnks.length - 1; i >= 0; i--) 
    if (lnks[i].getAttribute('rel').indexOf('style') > -1 && lnks[i].getAttribute('title')) 
     lnks[i].disabled = lnks[i].getAttribute('title') != activeStylesheet; 
};

当然，你应该尽量分解出这三个代码块之间共享的重复代码在某一点。 PS：一般来说，如果你缩进你的代码，阅读起来会容易得多。

来源

2013-03-18 10:07:42

我假设你从http://alistapart.com/article/alternate传递复制此代码。如果是这样，你可以只使用http://d.alistapart.com/alternate/styleswitcher.js，有以下变化：

与调用替换调用readCookie(name)到localStorage.getItem(name)
调用createCookie(name, value, days)通过调用localStorage.setItem(name, value)

来源

2013-03-18 22:21:28

localStorage没有设置

回答

相关问题