地址欄輸JS代碼，打造在線便箋 編輯器

在學習工作，使用瀏覽器的過程中，經常需要隨手記一下東西，當然有很多辦法解決這個問題，下面是酷且便捷的一種。

data:text/html,
<style type="text/css">
#e {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  font-size:16px;
}
</style>
<div id="e"></div>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
var myKey="SecretKey_MyData";
$(document).ready(function(){
    var e = ace.edit("e");
    var url = "http://api.openkeyval.org/"+myKey;
    $.ajax({
      url: url,
      dataType: "jsonp",
      success: function(data){
       e.setTheme("ace/theme/tomorrow_night_eighties");
       e.getSession().setMode("ace/mode/markdown");
       e.setValue(data);
      }
    });

    $("#e").on("keydown", function (b) {
      if (b.ctrlKey && 83 == b.which) {
        b.preventDefault();
        var data = myKey+"="+encodeURIComponent(e.getValue());
        $.ajax({
          data: data,
          url: "http://api.openkeyval.org/store/",
          dataType: "jsonp",
          success: function(data){
            alert("Saved.");
          }
        });
      }
    });
});
</script>

將如上代碼複製下來輸入到瀏覽器（不支持IE）地址欄中，敲下回車，你就得到了一個可識別多種編程語言的漂亮的編輯器，按下 CTRL+S 可以將文本內容保存下來。

可以將這個“地址”加入書籤欄，方便下次使用。

你輸入的內容不是保存在本地的，是將其保存在 http://openkeyval.org/ 這個開放的key-value在線存儲站點的web存儲服務上了。

 var url = "http://api.openkeyval.org/"+myKey;

可以看到如上代碼，在打開時會調用openkeyval.org取值的api，將你設置的key的value顯示出來，

 url: "http://api.openkeyval.org/store/",

按下CTRL+S時會調用openkeyval.org存儲的api，將對應的key-value保存下來。

既然是開放的key-value式的存儲，那麼就需要你使用一個不同的key了，否則有人跟你使用相同key的話你們會相互覆蓋的。所以在如上代碼中，找到 

var myKey="SecretKey_MyData";

這一行，然後將myKey換成你自己的獨特的key，這樣就能較爲放心的使用啦。下次在打開這個頁面都能看到以前編輯的內容了。如果有需要，也可以把你的key存儲的內容共享給他人用。

如上代碼來源： http://www.36kr.com/p/201096.html