js 利用localStorage全局属性来防止编辑页未保存情况发生

客户需求：“若关闭浏览器或跳转其他页面，弹窗提示是否保存当前编辑内容，目前用户在工作过程中，存在容易点错跳转其它页面导致已输入内容未保存的情况”

既然尊敬的客户提出了需求，那就想办法满足吧。

首先是浏览器的关闭提醒：

这个随便一搜，到处都是相关的帖子，而且JavaScript也支持“onbeforeunload”这个window事件，有兴趣的可以详细了解下window.onbeforeunload事件，大概作用是1.关闭或者刷新浏览器给出弹窗提醒 2.地址栏地址发生了变化，也会给出弹窗提示。

用法如下：

<script type="text/javascript">
    //浏览器关闭、刷新触发提醒弹窗
    window.onbeforeunload = function () {
        return '确认要关闭当前窗口？';
    }
</script>

效果（谷歌浏览器）：

 

浏览器提示好实现，参考网上别人家的资料，看到给编辑页body标签上也加上onbeforeunload事件就OK了，当时心中窃喜，以为不过如此。当回到我正做的这个后台系统时，傻了眼，卧槽！我页面body在哪？？？

研究了好半天，才发现原来页面body包含了左侧的导航栏和右侧的内容页。

内容页才是编辑页所在的地方，客户提的需求就是会误点左侧的导航栏导致页面未保存就跳转走了。

那咋办啊？网上给的body上加onbeforeunload事件明显没用啊。

有问题就解决，刚开始思路是将整个导航栏看做一个div，点击这个区域就触发弹窗提示，即使你点击了导航栏上的空白区域，也会提示，更不要说点击跳转链接了。不规范的操作总是带来一些问题，点击导航栏的链接之后，触发点击区域click事件之后，用window.confirm（）来提示进行确定离开或者取消操作。当点击取消按钮之后，谷歌浏览器用window.stop()能阻止跳转链接加载页面，但是火狐和IE浏览器竟然先执行跳转，弹窗后出来。想哭...

作为一个弱鸡程序员，不知道是方向不对还是能力不够，查了很多资料，比如js的加载顺序、执行事情的顺序、handle事件啥的，最终也没有解决这个问题。

        $(".sidebar-collapse").click(function (e) {
            if (!window.confirm('确认要离开当前窗口？')) {
                if (window.stop)
                    //谷歌、火狐浏览器
                    window.stop();
                else
                    //IE浏览器
                    document.execCommand("Stop"); 
            }
        }); 

客户是上帝啊，需求肯定要实现啊...不知不觉头发又掉了几根

在和上司以及同事的帮助下，帮我找了一条实现需求的路。就是利用window.localStorage作为全局变量的属性，给定一个isLock的属性项，当进入编辑页时，就将isLock的值设为1（锁定状态），当点击左侧导航栏触发类名为.tatgetlink a的click事件时，判断isLock的值是否是锁定状态，如果是的话就弹窗，点取消按钮，利用return false直接阻断了跳转事件，终于实现了需求。

<script type="text/javascript">
    //写入全局变量
    if (window.localStorage) {
        localStorage.setItem("isLock", "1");
    }
</script>

 

终于实现需求...

代码之路真的是又艰又长啊