js下利用userData实现客户端保存表单数据

使用userData可以在客户端浏览器上保存表单数据，从而实现数据的持久化储存，具体的实现步骤如下：

1.创建userData对象

var userData = document.createElement('input');
userData.type = "hidden";
userData.style.display = "none";
userData.addBehavior("#default#userData");

这里创建了一个input元素作为userData对象，并添加了一个用户数据行为(#default#userData)，这个行为提供了API以读写用户数据

2.设置userData的数据

userData.setAttribute('name', key);
userData.setAttribute('value', value);
userData.save("userData");

这里将key和value作为userData的属性，使用save()方法将数据保存到本地，方法中的"userDate"为userData数据的名字

3.获取userData的数据

userData.load("userData");
var value = userData.getAttribute('value');

这里使用load()方法直接从本地获取数据，再使用getAttribute()方法获取数据值。如果要取出所有的数据，只需要遍历userData对象的所有属性即可。

下面给出两个具体的示例供参考：

1.使用userData保存表单数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用userData保存表单数据</title>
</head>
<body>
    <form id="myForm">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
        <br>
        <input type="button" value="保存数据" onclick="saveData()">
    </form>
    <script>
        var userData = document.createElement('input');
        userData.type = "hidden";
        userData.style.display = "none";
        userData.addBehavior("#default#userData");
        document.body.appendChild(userData);

        function saveData() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            userData.setAttribute('name', 'formdata');
            userData.setAttribute('value', username + ':' + password);
            userData.save("userData");
            alert("表单数据已保存");
        }

        // 页面加载时自动填充已保存的表单数据
        window.onload = function() {
            userData.load("userData");
            var value = userData.getAttribute('value');
            if (value != null && value != "") {
                var arr = value.split(':');
                document.getElementById('username').value = arr[0];
                document.getElementById('password').value = arr[1];
            }
        }
    </script>
</body>
</html>

2.使用userData保存购物车数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用userData保存购物车数据</title>
</head>
<body>
    <p>选购商品：</p>
    <ul>
        <li>商品1：<input type="checkbox" name="goods" value="goods1"></li>
        <li>商品2：<input type="checkbox" name="goods" value="goods2"></li>
        <li>商品3：<input type="checkbox" name="goods" value="goods3"></li>
    </ul>
    <p><input type="button" value="加入购物车" onclick="addCart()"></p>
    <p>购物车：</p>
    <ul id="cart">

    </ul>
    <script>
        var userData = document.createElement('input');
        userData.type = "hidden";
        userData.style.display = "none";
        userData.addBehavior("#default#userData");
        document.body.appendChild(userData);

        function addCart() {
            var cart = document.getElementById('cart');
            var goods = document.getElementsByName('goods');
            for (var i = 0; i < goods.length; i++) {
                if (goods[i].checked) {
                    var key = goods[i].value;
                    var value = localStorage.getItem(key);
                    if (value == null) {
                        value = 1;
                    } else {
                        value = parseInt(value) + 1;
                    }
                    localStorage.setItem(key, value);
                }
            }
            showCart();
        }

        function showCart() {
            var cart = document.getElementById('cart');
            cart.innerHTML = "";
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);
                var li = document.createElement('li');
                li.innerHTML = key + "：" + value + "个";
                cart.appendChild(li);
            }
            userData.setAttribute('name', 'cartdata');
            userData.setAttribute('value', localStorage);
            userData.save("userData");
        }

        // 页面加载时自动填充购物车数据
        window.onload = function() {
            userData.load("userData");
            var value = userData.getAttribute('value');
            if (value != null && value != "") {
                var cart = JSON.parse(value);
                for (var key in cart) {
                    localStorage.setItem(key, cart[key]);
                }
                showCart();
            }
        }
    </script>
</body>
</html>

在这个例子中，我们使用localStorage保存购物车数据，然后使用userData将数据持久化到本地，实现了购物车数据的跨页面保存。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js下利用userData实现客户端保存表单数据 - Python技术站