自动记忆监听记忆form元素的值, 再也不怕刷新页面啦

本工具自动监听记忆form表单元素的值, 不再怕刷新页面啦,

原理: 

1. 自动提取指定的form元素的唯一身份标志, 

        有id取id, 没有id 取class, 没有class取tagName, 默认向上取5层, 如果本页面内仍然有重复的则继续向上取, 最终还是有重复的标志, 则覆盖, 这种情况已经比较少见了; 

         其次, 不同页面间的元素的标志, 重复机率也大, 如果有重复, 基本可以认为是表达同一个意义的input, 可以共用记忆的内容

2. 内容是记忆在localStorage中的, 所以不能过分使用, 可以考虑分优先级存储, 本地存部分, 另一部分存服务器

依赖: 

jQuery

使用方法:

FormMem.listen('.myform :input');

FormMem源码如下:

/**
 * 记忆指定的form元素的值, 包括input, select, textarea
 * @type type
 */
var FormMem = {
    _cache: {},
    getName: function(ele) {
        var tag = ele, tagName, name = '', level = 10, id, clazz, cssArr;
        var idArr = [];
        while (tag) {
            tagName = tag.tagName.toLowerCase();
            id = tag.id;
            if (id) {
                idArr.push('#'+id);
                break;
            } else {
                clazz = tag.className;
                if (clazz) {
                    cssArr = clazz.trim().replace(/\s+/g, ' ').split(' ');
                    level -= cssArr.length;
                    idArr.push(tag.tagName+'.' + cssArr.join('_'));
                } else {
                    idArr.push( tag.tagName);
                }
            }
            tag = tag.parentElement;
            level--;
            if (level < 0) {
                break;
            }
        }
        name = idArr.join('<');
        console.info(name);
        this._cache[name] = 1;
        return name;
    },
    listen: function(selector) {
        $(selector).each(function() {
            var _name = FormMem.getName(this);
            var value = $(this).val();
            var value_db = localStorage.getItem(_name);
 
            if (value_db) {
                if (value_db != value) {
                    $(this).val(value_db);
                }
            } else if (value) {
                localStorage.setItem(_name, value);
            }
        }).change(function() {
            var _name = FormMem.getName(this);
            var value = $(this).val();
            localStorage.setItem(_name, value);
        });
    }
};