☰

remember input

remember input content, when reopen will auto filled

当前为 2018-11-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         remember input
  3. // @name:zh      记忆输入内容
  4. // @supportURL   https://github.com/rectcircle/remember-input
  5. // @namespace    https://github.com/rectcircle/remember-input
  6. // @license      MIT
  7. // @version      1.0.0
  8. // @description         remember input content, when reopen will auto filled 
  9. // @description:zh      记忆用户输入的内容，不小心关闭后重新打开将自动恢复填充内容（当初始状态时输入框内容为空时）
  10. // @author       Rectcircle <rectcircle96@gmail.com>
  11. // @icon         https://rectcircle-10022766.cos.ap-shanghai.myqcloud.com/user-script/remember-input/icon.png
  12. // @include      *
  13. // @run-at       document-end
  14. // ==/UserScript==
  15.  
  16. //创建一个闭包，避免污染外部名字空间
  17. ;(function(){
  18.  
  19. 	const STORAGE_KEY = '__remember_inputs_values__'
  20.  
  21. 	function getRemeberValue(key){
  22. 		var remebers = localStorage.getItem(STORAGE_KEY);
  23. 		if(remebers == null){
  24. 			return null;
  25. 		}
  26. 		remebers = JSON.parse(remebers);
  27. 		return remebers[key] || null;
  28. 	}
  29.  
  30. 	function setRemeberValue(key, value){
  31. 		var remebers = localStorage.getItem(STORAGE_KEY);
  32. 		if(remebers == null){
  33. 			remebers = "{}";
  34. 		}
  35. 		remebers = JSON.parse(remebers);
  36. 		remebers[key] = value;
  37. 		remebers = JSON.stringify(remebers);
  38. 		localStorage.setItem(STORAGE_KEY, remebers);
  39. 	}
  40.  
  41. 	//创建一个元素的css选择符格式为tag#id.class
  42. 	function createCSSSelectorByEle(ele) {
  43. 		var selector = ele.localName;
  44. 		if (ele.id != "") {
  45. 			selector += '#' + ele.id;
  46. 		}
  47. 		if (ele.className != "") {
  48. 			var classNames = ele.classList;
  49. 			classNames.forEach(function (value) {
  50. 				selector += '.' + value;
  51. 			})
  52. 		}
  53. 		return selector;
  54. 	}
  55.  
  56. 	function createSaveListener(ele, key){
  57. 		return function () {
  58. 			var value = ele.value;
  59. 			setRemeberValue(key, value);
  60. 			//=========personal hack, you can delete=========
  61. 			if (window.simplemde != undefined) {
  62. 				var mykey = "simplemde";
  63. 				var myvalue = window.simplemde.value();
  64. 				setRemeberValue(mykey, myvalue);
  65. 			}
  66. 			//===============================================
  67. 		}
  68. 	}
  69. 	
  70. 	function main(){
  71. 		console.log("开始恢复并监听输入")
  72.  
  73. 		// 查询当前页面的输入框
  74. 		var nodes = document.body.querySelectorAll('textarea, input')
  75.  
  76. 		//key计数
  77. 		var keyCnt = {};
  78.  
  79. 		//=========personal hack, you can delete=========
  80. 		if (window.simplemde != undefined) {
  81. 			var key = "simplemde";
  82. 			if (keyCnt[key] === undefined) {
  83. 				keyCnt[key] = 1;
  84. 			} else {
  85. 				keyCnt[key]++;
  86. 				key = key + (keyCnt[key] - 1);
  87. 			}
  88. 			var value = getRemeberValue(key);
  89. 			if (window.simplemde.value() == "" && value != null) {
  90. 				window.simplemde.value(value)
  91. 			}
  92. 		}
  93. 		//===============================================
  94.  
  95. 		// 遍历输入框
  96. 		nodes.forEach(function(ele){
  97. 			// 检测输入框是否为空且本地存储上是否有内容如果有直接恢复
  98. 			var key = createCSSSelectorByEle(ele);
  99. 			if (keyCnt[key] === undefined){
  100. 				keyCnt[key] = 1;
  101. 			} else {
  102. 				keyCnt[key] ++;
  103. 				key = key + (keyCnt[key] - 1);
  104. 			}
  105. 			var value = getRemeberValue(key);
  106. 			if(ele.value == "" && value != null){
  107. 				ele.value = value
  108. 			}
  109. 			// 添加监听函数
  110. 			ele.addEventListener("keydown", createSaveListener(ele, key));
  111. 		});
  112.  
  113. 		// 给所有的输入框的修改添加事件，将修改内容放到本地存储中
  114. 	}
  115. 	setTimeout(main, 1000);
  116. })();