remember input

remember input content, when reopen will auto filled

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         remember input
// @name:zh      记忆输入内容
// @supportURL   https://github.com/rectcircle/remember-input
// @namespace    https://github.com/rectcircle/remember-input
// @license      MIT
// @version      1.0.0
// @description         remember input content, when reopen will auto filled 
// @description:zh      记忆用户输入的内容,不小心关闭后重新打开将自动恢复填充内容(当初始状态时输入框内容为空时)
// @author       Rectcircle <[email protected]>
// @icon         https://rectcircle-10022766.cos.ap-shanghai.myqcloud.com/user-script/remember-input/icon.png
// @include      *
// @run-at       document-end
// ==/UserScript==

//创建一个闭包,避免污染外部名字空间
;(function(){

	const STORAGE_KEY = '__remember_inputs_values__'

	function getRemeberValue(key){
		var remebers = localStorage.getItem(STORAGE_KEY);
		if(remebers == null){
			return null;
		}
		remebers = JSON.parse(remebers);
		return remebers[key] || null;
	}

	function setRemeberValue(key, value){
		var remebers = localStorage.getItem(STORAGE_KEY);
		if(remebers == null){
			remebers = "{}";
		}
		remebers = JSON.parse(remebers);
		remebers[key] = value;
		remebers = JSON.stringify(remebers);
		localStorage.setItem(STORAGE_KEY, remebers);
	}

	//创建一个元素的css选择符格式为tag#id.class
	function createCSSSelectorByEle(ele) {
		var selector = ele.localName;
		if (ele.id != "") {
			selector += '#' + ele.id;
		}
		if (ele.className != "") {
			var classNames = ele.classList;
			classNames.forEach(function (value) {
				selector += '.' + value;
			})
		}
		return selector;
	}

	function createSaveListener(ele, key){
		return function () {
			var value = ele.value;
			setRemeberValue(key, value);
			//=========personal hack, you can delete=========
			if (window.simplemde != undefined) {
				var mykey = "simplemde";
				var myvalue = window.simplemde.value();
				setRemeberValue(mykey, myvalue);
			}
			//===============================================
		}
	}
	
	function main(){
		console.log("开始恢复并监听输入")

		// 查询当前页面的输入框
		var nodes = document.body.querySelectorAll('textarea, input')

		//key计数
		var keyCnt = {};

		//=========personal hack, you can delete=========
		if (window.simplemde != undefined) {
			var key = "simplemde";
			if (keyCnt[key] === undefined) {
				keyCnt[key] = 1;
			} else {
				keyCnt[key]++;
				key = key + (keyCnt[key] - 1);
			}
			var value = getRemeberValue(key);
			if (window.simplemde.value() == "" && value != null) {
				window.simplemde.value(value)
			}
		}
		//===============================================

		// 遍历输入框
		nodes.forEach(function(ele){
			// 检测输入框是否为空且本地存储上是否有内容如果有直接恢复
			var key = createCSSSelectorByEle(ele);
			if (keyCnt[key] === undefined){
				keyCnt[key] = 1;
			} else {
				keyCnt[key] ++;
				key = key + (keyCnt[key] - 1);
			}
			var value = getRemeberValue(key);
			if(ele.value == "" && value != null){
				ele.value = value
			}
			// 添加监听函数
			ele.addEventListener("keydown", createSaveListener(ele, key));
		});

		// 给所有的输入框的修改添加事件,将修改内容放到本地存储中
	}
	setTimeout(main, 1000);
})();