Question

现在我不知道如何显示“关键字已保存”。使用代码中使用模态对话框的CSS的#note。 Ui-modal-dialog正在运行，我有，没有图标。

现在我想在ui-modal-dialog中点击“yes”替换button = onclick函数“updatekeyword（）”并更新关键字。虽然我基本上写了其他部分，但我没有写出函数“updatekeyword（）”。

所以我不知道这个功能是什么。似乎我应该知道函数“updatekeyword（）”实际上正在咨询阅读其他问题。基本上，我现在迷失了下一步我需要的信息。

代码如下。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- CSS -->
    <link type="text/css" rel="stylesheet" href="css/style.css" media="all">
    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <style>
        #note {
            position: fixed;
            z-index: 101;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(4, 115, 184, 0.9);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 2.5;
            overflow: hidden;
            display: none;
        }
    </style>
    <!-- JS -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/newsTicker.js"></script>
    <script type="text/javascript" src="jsapi/keyword.js"></script>
    <script type="text/javascript" src="jsapi/utils.min.js"></script>
</head>

<body>
    <div>
        <div id="note">
            Keyword saved.
        </div>
        <div class=btn_Grp>
            <button onclick="upadateKeyword()">apple</button>
        </div>
        <div id="dialog">Dialog Content</div>
        <style>
            .myTitleClass .ui-dialog-title {
                white-space: normal;
            }

            .myTitleClass .ui-dialog-titlebar {
                background: rgba(4, 115, 184, 0.9);
                color: #fff;
                font-size: 16px;
                height: 40px;
            }
        </style>

        <head>
            <meta charset="utf-8">
            <title>dialog demo</title>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        </head>

        <body>
            <button id="opener">Register Keyword</button>
            <script>  
                $("#dialog").dialog({
                    autoOpen: false,
                    　　height: 300,
                    width: 1000,
                    dialogClass: 'myTitleClass',
                    modal: true,
                    closeOnEscape: false,
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                    },
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");

                        }
                        , "No": function () {
                            $(this).dialog("close");


                        }
                    }
                });
                $("#opener").click(function () {
                    $("#dialog").dialog("open");
                });
            </script>
        </body>
    </div>
    </div>
</body>

</html>

Answer 1

这个答案试图描述您需要参与的一般学习领域，以完成您想要做的事情。根据应用程序尝试实现的目的，您有两种选择：客户端存储或服务器端存储。

客户端存储

最简单的方法是使用浏览器的内置数据存储选项：cookies和localStorage。您可以使用Javsacript访问这两个。您可以找到大量有关如何使用这些资源的在线资源，但在决定使用哪些内容时，您可能需要考虑以下事项。

Cookie 这些已经存在，并且在所有浏览器中均受支持。它们具有设置“过期时间”的能力，因此它们可以在一段时间后自动删除。它们也可以限制为只能通过SSL访问或仅在某些目录中访问。

LocalStorage：这是一种“更新”的技术，但由于它在IE8 +中得到支持，所以现在你可以自由地使用它。使用键/值对进行信息存储是一种更直接的方法。您可以在localStorage（通常为5MB）中存储比cookie更多的数据。

默认情况下，浏览器会接受存储Cookie和localStorage的请求，但请注意，用户可以更改其设置以拒绝这些请求。（您应该对此进行测试。）有关Cookie和localStorage和sessionStorage的更多详细信息： What is the difference between localStorage, sessionStorage, session and cookies?

服务器端存储

这种类型的解决方案比上面的工作要多得多，但如果你想要一个强大的解决方案，允许用户从不同的浏览器和不同的设备（手机，桌面）进行连接，那么它也更有可能成为您所需要的解决方案。，笔记本电脑），仍然可以看到他们存储的数据。

您将需要使用服务器端编程环境（PHP，Python，.Net，Java）来管理来自HTML或直接来自Javascript（使用AJAX请求）的请求。从代码的角度来看，这两个请求看起来几乎相同;两者通常都是从用户的浏览器管理“POST”请求。

任何进来的请求都应该测试所有值，以确保它们是预期的（例如，不要太短或长，限制为整数，不包含HTML，尤其是没有Javascript）。

收到并验证请求后，必须存储信息。这最好通过使用数据库库（如PDO for PHP）来确保您保护数据库免受“SQL注入”和黑客的其他攻击。

设置应用程序使用的数据库表可以直接在代码中完成，但通常使用单独的数据库管理程序进行管理。（例如，用于MySQL的流行，免费和基于Web的DBM工具是phpMyAdmin。）

这种服务器端存储方法的进一步复杂化是您需要确保从您的应用程序请求数据的浏览器是该数据的真正所有者。这通常涉及在发布您存储的数据之前创建登录/密码验证系统。这是一项非常重要的任务，需要学习会话管理，密码盐和哈希。（大多数人不会编写自己的身份验证系统，但这样做是一种很好的学习体验。）

<强>更新

这是一个将jQuery-UI对话框与localStorage示例集成的JSFiddle。 https://jsfiddle.net/ColiniloC/6zho31oj/

关键领域是对打开和按钮例程的更改：

open: function (event, ui) { $('.ui-dialog-titlebar-close', ui.dialog | ui).hide(); var keyword = localStorage.getItem('keyword'); $('#new_keyword').val( keyword ).focus(); }, buttons: { 'Save': function () { $(this).dialog('close'); var new_keyword = $('#new_keyword').val(); // Input validation goes here! localStorage.setItem('keyword', new_keyword ); show_note( "Your keyword has been updated to '" + new_keyword + "'" ); } , 'Cancel': function () { $(this).dialog('close'); } }

如何使用onclick按钮

1 个答案: