Question

我正在尝试通过添加一个允许用户使文本增长以便更容易阅读的按钮来将可访问性输入到我的网站中。然后，这样他们就不必在每次加载页面时都点击按钮，将其响应保存为cookie

单击按钮后，cookie内容似乎没有改变，我试图手动编辑cookie，并且已经证明没有任何改变，我认为问题在于检查cookie

var check = checkCookie();
if (check === "true") {
  //add large text here
  $('.page-main').has("p").has("span").contents().addClass("enlarge");
} else if (check === "false") {
  //add small text here
  $('.page-main').has("p").has("span").contents().removeClass("enlarge");
} else {
  document.cookie = "TIDEtext=false; path=/";
}

$(".TEXT").click(function() {
  var check = checkCookie();
  if (check === "false") {
    document.cookie = "TIDEtext=true; path=/";
    //add large text here
    $('.page-main').has("p").has("span").contents().addClass("enlarge");
  } else if (check === "true") {
    document.cookie = "TIDEtext=false; path=/";
    //add small text here
    $('.page-main').has("p").has("span").contents().removeClass("enlarge");
  } else {
    document.cookie = "TIDEtext=false; path=/";
  }
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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 "";
}

function checkCookie() {
  var text = getCookie("TIDEtext");
  if (text !== "") {
    var cName = "TIDEtext";
    getCookie(cName);
  }
}

Answer 1

var check = checkCookie();
if (check === "true") {

function checkCookie() {
  var text = getCookie("TIDEtext");
  if (text !== "") {
    var cName = "TIDEtext";
    getCookie(cName);
  }
}

您的checkCookie（）没有返回字符串＆＃39; true＆＃39;。

如果更改函数checkCookie（）以返回布尔值TRUE，并将if (check === "true")更改为if (check == true)它应该有效。

Answer 2

我做了一些改动，这应该有效

function setCorrectTextSize(update) {
  var check = getCookie("TIDEtext");
  var showLargeText = false;
  var shouldUpdate = update !== undefined;

  if (check == "") {
    showLargeText = shouldUpdate ? true : false;
  } else if (check === "false") {
    showLargeText = shouldUpdate ? true : false;
  } else if (check === "true") {
    showLargeText = shouldUpdate ? false : true;
  } 
  if (showLargeText) {
  $('.page-main').has("p").has("span").contents().addClass("enlarge");
  } else {
  $('.page-main').has("p").has("span").contents().removeClass("enlarge");
  }
  if (shouldUpdate) {
         setCookie("TIDEtext", showLargeText?"true":"false", 60);
  }
}

$(".TEXT").click(function() {
    setCorrectTextSize(true);
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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 "";
}

setCorrectTextSize();

小提琴：https://jsfiddle.net/67sg8f0g/3/

Answer 3

您可以使用local storage解决此问题。

localstorage更快，因为cookie将在每个http标头上发送数据。然而，这有点不利。如果您在https页面中，则无法访问存储在http中localstorage集中的相同值，反之亦然。

实施例

＆＃13;

$(document).ready(function()
{
    //when page loads get value from local storage
    var fontsize = localStorage.fontSize;
    
    //set fontsize
    $('.textSize').css("font-size", fontsize + "px");
    $("#sizeControl").val(fontsize);
});

$("#sizeControl").change(function()
{
  //get the size value
  var fontsize = $(this).val();
  
  //update the font size
  $('.textSize').css("font-size", fontsize + "px");
  
  //use local storage to store the size value
  localStorage.fontSize = fontsize;
});

＆＃13;

.padded
{
  padding: 15px;
}

.bordered
{
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="padded bordered">
  <select class="padded" id="sizeControl">
    <option value="12"> small </option>
    <option value="18"> medium</option>
    <option value="24"> large </option>
  </select><br/>
  <p class="textSize">
    Some example text showing how a user can enlarge/save text using local storage
  </p>
</div>

＆＃13;

不幸的是，堆栈片段是沙盒的，因此我们无法在代码段查看器中看到它。为此我创建了一个JS fiddle供您自己测试：

更改文字大小以响应Cookie

3 个答案:

实施例