Question

可以将使用jquery进行的修改保存到DOM的元素中吗？我想要的是：在插入十六进制代码简介后输入文本和“＃div1”颜色被更改，当您重新加载页面时，您插入的颜色将被保存。这是我的代码：

<html>
<body>
<head>
<script type="text/javascript" src="jquery-1.9.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<div id="div1">


<input type="text" id="ui"/>
<input type="button" onclick="ct()" value="enter hex color"/>


</div>

<script type="text/javascript"> 
function ct(){ 
$('#div1').css('background-color', "#" + $('#ui').val());
} 


</script>

</body>
</html>

Answer 1

创建一个简单的JQuery cookie来存储值。然后在页面加载时引用cookie！

我建议为按钮使用'id'，但此代码使用带有JQuery选择器的HTML示例代码

$(document).ready(function() { 

     //store value 
     $('input[type=button]').click( function () {
          $.cookie("color", null);  //clear cookie in order to set the value
          $.cookie("color", $('#ui').val() ); //set cookie
          $('#div1').css('background-color', "#" + $.cookie("color") ); 
     });

     //reference cookie to set the color, happens on every HTML page load
     $('#div1').css('background-color', "#" + $.cookie("color"));
 });

Answer 2

您可能在所有现代浏览器（包括IE8）中寻找DOM Storage - can be used。

由于您已经在使用jQuery，请查看以下示例：

$(function() {
  // grab your elements
  var $div = $('#div1');
  var $input = $('#ui');
  var $button = $('#ui-save'); // TODO: add this id to the button

  // fetch value from storage
  var initial = window.localStorage && localStorage.getItem('background');
  // set to whatever was in storage, if any
  if (initial) {
    $div.css('background', initial);
  }
  // bind to the input
  $button.on('click', function() {
    var color = $input.val();
    window.localStorage && localStorage.setItem('background', color);
    $div.css('background', color);
  })
});

请注意，window.localStorage &&可以使其在不知道localStorage的浏览器中运行。在这些浏览器中，颜色仍然可以编辑，但不会在页面重新加载时保存。

Answer 3

您可以借助数据库或服务器端脚本或cookie来执行此操作。

当您点击提交时，您需要将该十六进制代码发送到数据库或其他数据存储服务。当你加载html页面时，它必须从数据库中查询该十六进制颜色。

它不会按原样运作。

Answer 4

单独使用客户端javascript技术，您将无法在下一页加载时实际更改输出HTML源。

然而，您可以通过cookie或HTML5 localStorage保留颜色选择，并在下一页加载时使用javascript再次应用它。

如果您确实想要修改输出源代码，您可以设置服务器知道如何解释的cookie以更改输出的源，或者您可以使用AJAX调用转到脚本实际上修改静态源代码文件或再次，设置一些可能改变源输出方式的配置。

Answer 5

使用cookie是解决问题的最佳方法。

function ct(){ 
    if($('#ui').val() == " " && document.cookie != ""){
        var color = document.cookie;
    }elseif($('#ui').val() != " "){
        color = $('#ui').val();
        document.cookie = color;
    }else{
        color = "defaultcolor";
    }
    $('#div1').css('background-color',color );
}

如何保存对DOM元素的修改？

5 个答案: