现在我们在自定义字符统计插件（jquery.charcount.js）中，添加方法storeWeibo()，首先我们判断当前浏览器是否支持localStorage，主流的浏览器如：Chrome、Firefox、Opera、Safari以及IE 8都支持本地存储（localStorage）和会话存储（sessionStorage）。
如果浏览器支持本地存储，那么我们可以直接调用localStorage的setItem()方法，将textarea中的数据存储起来；当我们再次打开页面或浏览器，首先检查localStorage是否存储了相应的数据，如果有数据存储，那么我们再次把数据取出显示到textarea中。
但由于一些用户可能使用旧版的浏览器（如：IE6和IE7），考虑到兼容我们必须提供支持旧版浏览器的方案。
我们知道旧版浏览器（如：IE6和IE7），它们支持Cookies的持久化存储方式，所以我们使用Cookies实现getItem()， setItem()和removeItem()等方法。
图5 主流浏览器支持Web Storage
现在，我们已经完成了字符统计插件jquery.charcount.js，由于时间的关系我们已经把发送框的界面设计好了，具体的HTML代码如下：
<!-- From design--> <body> <form method="post"> <h2> 有什么新鲜事想告诉大家？</h2> <div> <label for="message"> 有什么新鲜事想告诉大家？<b></b></label> <textarea placeholder="请Fun享"></textarea> <span></span> <input type="submit" value="发布"> </div> </form> </body>
图6 发送框界面设计
接下来，我们在页面代码中引用jQuery库和自定义字符统计插件jquery.charcount.js，具体代码如下：
<!-- Adds Javascript reference --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/jquery.charcount.js"></script>
上面，我们直接引用Google提供的jQuery库，当然我们也把jQuery库下载到本地，然后引入到项目中，接下来我们在HTML页面中添加调用字符统计插件的代码，具体代码如下：
<!-- When document ready invokes charCount function--> <script type="text/javascript"> $(document).ready(function () { // Uses default setting. $("#weiboMsg").charCount(); }); </script>
上面，我们完成了在页面代码中调用字符统计插件，每当我们在文本框中输入字符时，都会实时地显示剩余的字符数，而且我们在文本框中输入的字符都会保存到localStorage中。
接下来，我们分别在Chrome和Firefox中查看保存在localStorage中的数据。
首先，我们打开Chrome的“开发者工具”（Ctr+Shift+I)，然后我们选择“Resources”选项，这时我们就可以看到保存在localStorage中的数据了。
图7 Chrome的本地存储