我需要向我的 javascript 添加什么才能使用本地存储，以便在刷新页面时，用户选择的字体大小仍然相同？

Question

我正在建立一个网站并开始自学 javascript。在网站上，我创建了三个按钮，网站用户可以 select 更改字体大小。我正在尝试使用 localStorage，以便如果用户 select 设置了字体大小并刷新浏览器，则字体大小不会恢复为写入的默认值。这是按钮和 javascript:

的代码

<button type="button" id="small_button" role="button" onclick="Small_Font()">A</button>

<script>

function Small_Font() {
    document.getElementById("html").style.fontSize = "16px";
}

</script>


<button type="button" aria-label="medium font" id="medium_button" role="button" onclick="Medium_Font()">A</button>

<script>

function Medium_Font() {
    document.getElementById("html").style.fontSize = "19.2px";
}

</script>


<button type="button" id="big_button" role="button" onclick="Large_Font()">A</button>

<script>

function Large_Font() {
    document.getElementById("html").style.fontSize = "24px";
}

</script>

我看过这个 post ，但不能让它工作，可能是因为我没有下载 jQuery。任何有关如何在非 jQuery javascript 中为这些按钮使用本地存储的帮助将不胜感激。

Answer 1

你可以只用一个函数来完成你的工作，只需传递来自调用的字体大小和一个加载时的 winodw 监听器，当你的页面加载时，它将把字体应用到 html。

有一个默认大小“19.2px”表示第一次加载或者如果用户从未点击过字体调整功能

<button type="button" id="small_button" role="button" onclick="font('19.2px')">A</button>
<button type="button" aria-label="medium font" id="medium_button" role="button" onclick="font('16px')">A</button>
<button type="button" id="big_button" role="button" onclick="font('24px')">A</button>

<script>
function font(size) {
    document.getElementById("html").style.fontSize = size;
    localStorage.setItem('fontsize',size);
}

window.onload = function(){
    var g = localStorage.getItem('fontsize') || '19.2px';
    document.getElementById("html").style.fontSize = g;
}
</script>

Answer 2

为什么需要 jQuery 将其保存在本地存储中？它是一个 html5 功能，您可以简单地使用 JS

localStorage.setItem('font', JSON.stringify({'font-size':'150px'}));

var retrievedFont = localStorage.getItem('font');

console.log('retrievedFont: ', JSON.parse(retrievedFont));

Answer 3

您可以将其存储为 cookie。

<script>
function Small_Font() {
    document.getElementById("html").style.fontSize = "16px";
    document.cookie="fontsize=16px";
}
</script>

将字体大小存储为 cookie 后，您需要获取 cookie 并检查它们。下面是一个获取带有 cookie 名称的 cookie 的函数，对您来说是 fontsize。原因是 document.cookie 将 return 所有 cookie 放在一个字符串中，您需要解析它以获得您想要的那个。

<script>
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

现在您需要运行在每次加载页面后使用 getCookie 函数并更新页面样式。

function myOnLoadFunction
{
    var myfontsize = getCookie("fontsize");
    document.getElementById("html").style.fontSize = myfontsize;
}

对于运行这个 onLoad 函数，在每次页面加载后你可以像这样把它放到标签中

<body onload="myOnLoadFunction();">

我需要向我的 javascript 添加什么才能使用本地存储，以便在刷新页面时，用户选择的字体大小仍然相同？

What do I need to add to my javascript to be able use local storage so that when the page is refreshed, the user-selected font-size is still the same?

javascript

css

accessibility

font-size

local-storage