【学艺不精系列】自制简易 Cookie 数据存储器

起因是为了减少某个Web应用中，Cookie的使用数量，毕竟IE6只支持每个域约20个键。
因此，我将Web应用中所有Cookie变量合并为一个Json字符串来存储。

<html>
<head>
    <title>Cookie 测试</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <%if (false) {  %><script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script><%} %>
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script src="Scripts/jquery.json-2.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function () {
            $.cookie("dbc", "{}"); // Cookie存储初始化
            $("#divdbc").html($.cookie("dbc")); // 在div中展示初始化后的Cookie
            $("#btnSet").click(function () {
                fnSet($("#txtKey").val(), $("#txtValue").val());
                $("#txtKey").val("");
                $("#txtValue").val("");
                $("#divdbc").html($.cookie("dbc"));
            });
            $("#btnGet").click(function () {
                alert(fnGet($("#txtKey").val()));
            });
        });
        // 存储键值的方法
        function fnSet(key, value) {
            var dbc = eval("(" + $.cookie("dbc") + ")"); // 将字符串转为Json对象
            dbc[key] = value;
            $.cookie("dbc", $.toJSON(dbc));
        }
        function fnGet(key) {
            var dbc = eval("(" + $.cookie("dbc") + ")");
            return dbc[key];
        }
    </script>
</head>
<body style="font-family: 微软雅黑,宋体,Arial; font-size: 13px;">
    <form id="form1" runat="server">
    输入键值：<br />
    <input id="txtKey" type="text" /> = <input id="txtValue" type="text" /><br />
    <input id="btnSet" type="button" value="设置" /><input id="btnGet" type="button" value="获取" /><br />
    Cookie 列表：
    <div id="divdbc" style="border: 1px solid black; width: 400px; height: 200px; font-family: Consolas; font-size: 12px;">&nbsp;</div>
    </form>
</body>
</html>

posted on 2012-10-15 17:55  飞扬的尘埃  阅读(415)  评论(0)  编辑  收藏  举报

导航