Fork me on GitHub

页面表单填入数据的恢复与回撤

需求:需要使网页填入的数据可以在页面奔溃后再次打开页面能够恢复和在对页面进行数据操作时能够回撤。
实现:采用浏览器的localstorage来保存在对应网页的数据,数据格式采用json。
实现细节:
1. 首先根据数据的内容将数据分组,在一组数据的外层包裹div上添加onchange事件fun(obj)
2. 当onchange事件触发后调用fun(obj)将对应的一组数据的内容重写进localstorage中保存
3. 由于页面有很多个数据的分组调用onchange事件的通用函数fun(obj)需要判断当前的 触发的分组的外层div的id,再进行相应的数据操作
4. 每次页面触发onchange都会生成新的json数据保存在localstorage中,由于我们需要做回撤功能和localstorage本身也是key-value存储,定义一个全局的变量count变化的值作为key的标识
5. 由于回撤和恢复的功能类似,都是将数据重写进页面组件中,所以我们定义一个公共的函数backOrRecovery(),当打开奔溃的页面时根据localstorage中最新的json数据给count设置值,然后调用backOrRecovery()函数恢复;当需要回撤时将count--然后调用backOrRecovery()函数回撤。
6. 回撤热键事件Ctrl+z的定义,document.onkeydown = hotkey;当按下键盘时调用hotkey函数

 function hotkey()
    {
        var z=window.event.keyCode;
        if((z==90)&&(event.ctrlKey))
        {
            if(count>1) {
                 count--;
                 backOrRecovery();
            }
            else{
                alert("没有可回撤的数据");
            }
        }
    }


最新评论

    还没有人评论...

当当

友情链接

Powered by Python. Copyright © 2017.

鄂ICP备17010875号. All rights reserved.