地址栏输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