js模仿微博实现统计字符和本地存储功能

随着移动设备和Web应用的普及，为了更好地方便用户使用，对网页或应用的用户体验要求越来越高。确实，作为用户，他们更喜欢选择用户体验好的网站或者应用，所以作为开发者，我们需要开发更多的生化应用。

相信很多人都有使用微博的经验。对于微博这样的社交平台来说，良好的用户体验变得尤为重要。

比如我们发微博的时候，文本框会实时提示我们剩余字符数，方便用户知道微博的字数限制，也限制了用户输入的字数。

有句话我们要牢记：每一次投入都要有限度；必须检查所有输入。

在接下来的文章中，我们将介绍如何实现输入字符的实时提示功能和localStorage技术。

1.jQuery字符统计插件。现在，我们以新浪微博发送的微博输入框为例，介绍如何使用jQuery实时提示用户剩余字符。

新浪微博限定140个中文(280个英文)，当然还有各种其他字符和空格。在用户输入达到极限之前或之后，良好的用户体验应该提示用户接近或达到极限。当然，我们可以通过使用不同的颜色或加粗字体来提示用户。

图1新浪微博用户输入限制。

字符计数插件将在输入框后面创建一个兄弟元素跨度，用于显示当前剩余的字符。当输入框的向上键、向下键和改变事件被触发时，跨度中剩余的字符将被实时修改。如果剩余字符接近“警告”(接近零)，CSS样式将被修改，以提示用户接近输入限制。

当剩余字符达到“警告”时，在span元素中添加相应的样式类，当剩余字符等于或大于输入限制时，添加相应的样式类，提醒用户字符数已超过限制。

我们通过字符计数插件将以下代码动态插入页面：

！-添加动态元素-span class=' counter' 140/span默认情况下，字符限制为140。当可输入的字符数小于或等于25时，提示用户字符数超出限制。让我们定义默认条件对象：

//默认限制. var defaults={ allowed: 140，warning: 25，css: 'counter '，counterElement: ' span '，cssWarning: ' warning '，cssExceeded: ' exceeded '，countertext : ' ' }；上面，我们定义了defaults对象，它包含诸如允许、警告、css、cssWarning和CSS oversized等属性。通过修改defaults对象的属性，我们可以很容易地修改字符统计插件。

允许：允许输入的字符数。警告：提示用户剩余字符数接近零。Css:添加到计数器元素的CSS样式类名。CssWarning:警告提示样式。CssExceeded:超过了提示样式的字符限制。接下来，我们在字符统计插件中定义计算()方法，该方法计算当前剩余的字符。如果达到警告范围，则在页面中添加样式类“警告”，当剩余字符小于或等于零时，在页面中添加样式“超出”。

/****计算char * @ param obj */函数calculate(obj) { //获取计数。var count=getLength($(obj)。val())；var available=options . allowed-count；if(available=options . warning available=0){ $(obj)。下一个()。add class(options . CSS warning)；} else { $(obj)。下一个()。remove class(options . CSS warning)；} if(可用0) { $(obj)。下一个()。add CLaSS(options . CSSsured)；} else { $(obj)。下一个()。remove CLaSS(options . CSSsured)；} $(obj)。下一个()。html(options.counterText可用)；}我们还定义了getLength()方法，当输入字符为中文时，给totLen加1，当输入字符为英文字符或数字时，给totLen加0.5(默认允许140个中文字符)。

/***获取字符的长度。* @ param str * @返回{ Number } */函数getLength(str){ var totLen=0；for(var I=0；I字符串长度；i ) { //如果字符是中文。if(str . charcodeat(I)256){ Totlen=1；} else { totLen=0.5} }返回Math . floor(ToTLEN)；}接下来，我们绑定控件中的keyup()、keydown()和change()事件方法。当page对象触发keyup()，keydown()或change()事件方法时，我们调用calculate()方法计算当前剩余的字符数，并将相应的CSS样式添加到页面中。

//绑定文本区域上下键和change event . this . each(function(){ $(this))。在(' options . counter element ' class=' options . CSS ' ' ' options . counter text '/' options . counter element ' ')之后；算(这个)；$(这个)。keyup(function(){ calculate(this)，store Weibo(this)})；$(这个)。keydown(function(){ calculate(this)，store Weibo(this)})；$(这个)。change(function(){ calculatea(this)})；});2.Web Storage现在，我们已经基本实现了jQuery字符计数插件功能。相信很多人都注意到了，如果我们发微博的话，还没有发出去的微博，下次打开页面的时候，还是会保留我们还没有发出去的微博。即使我们关闭浏览器，重新打开页面，我们没有发出的信息仍然会存在。

实际上，有很多方法可以实现这个功能，例如，我们可以使用Cookies、会话等技术。

随着HTML5规范的制定，W3C同时制定了Web Storage规范，规定在客户端存储数据，直到session过期(Session存储)或者超过本地容量(本地存储)。它比传统的Cookies存储更强大，更容易实现，容量也更大(大多数浏览器支持5M本地存储)。

会话存储会话存储：它将数据保存在会话中，一旦我们关闭浏览器选项卡，会话中的数据将无效。

本地存储本地存储：当数据需要永久存储在客户端时，我们可以使用本地存储，它以键/值的形式存储数据。如果在关闭页面或浏览器后，重新打开的页面的数据仍然存在，它将提供数据的持久存储。一个简单的应用程序是记录用户访问页面的次数。

图2存储空间对比。

接下来，我们将介绍如何使用本地存储来保存用户数据。

因此，localStorage提供了五个方法，setItem()、getItem()、removeItem()、key()和clear()，以及一个属性长度，具体定义如下：

//存储定义.接口存储{ readonly属性无符号长长度；DOMString键(在无符号长索引中)；getter any getItem(在DOMString键中)；setter creator void setItem(在DOMString键中，在任何值中)；deleter void removeItem(在DOMString键中)；void clear()；};在现代浏览器中使用本地存储非常简单。我们只需要在Javascript代码中直接调用localstorage对象的方法或属性。

//存储用户名‘jkrush’，//然后获取username . local storage . setitem(‘username’，‘jkrush’)；var userName=local storage . getitem(' userName ')；在上面，我们通过调用localStorage的setItem()和getItem()方法来实现数据的存储和获取。由于localStorage以Key/Value的形式存储数据，所以我们在存储时需要提供Key/Value的值，然后调用getItem()方法获取Key中存储的值。

因为本地存储是以键/值的形式存储的，所以我们可以很容易地存储字符串类型的数据。如果我们需要存储对象类型，本地存储将被拉伸。

假设我们在本地存储中存储一个学生对象。具体代码如下：

//定义一个学生对象. var student={ name: 'JK_Rush '，age: '26 '，sex: '男' }；//打印学生objectconsole.log(学生)；//存储学生对象。//再次获取student对象. localStorage.setItem('student '，student)；console . log(local storage . getitem(' student '))；

图3本地存储存储对象。

通过上面示例，我们注意到在萤火虫的控制台中输出的并不是真正的学生对象，而是学生对象的信息而已。

那么我们该如何把对象存储到localStorage中呢？其实，我们可以把对象序列化为JSON数据进行存储，最后通过反序列化把JSON数据转换为对象。具体实现如下：

//定义一个学生对象。var student={ name: 'JK_Rush '，age: '26 '，sex: '男' };console.log(学生);//将对象序列化为JSON字符串。本地存储。setitem(' student ')，JSON。stringify(学生))；//将json字符串反序列化为对象。控制台。日志(JSON。解析(本地存储。getitem(“学生”))；上面示例中，在存储学生对象之前，我们使用JSON的stringify()方法序列化对象为JSON字符串，然后存储到localStorage中；如果我们要获取学生对象，只需使用JSON的解析()方法反序列化字符串为对象。

图四本地存储存储对象

上面，我们实现了学生对象转换为JSON格式字符串存储到localStorage中，接下来，我们在前面的例子中添加localStorage功能，具体代码如下：

/***将用户数据存储到本地存储中* @ param obj */function storewibo(obj){//检查浏览器是否支持本地存储如果(窗口。本地存储){本地存储。setitem(' publisherTop _ word '，$(obj).val())；} else { //例如，ie 6和七不支持本地存储，//所以我们需要以其他方式提供窗户。本地存储={ getitem :函数(Skey){ if(！sKey ||！this . hasown property(Skey)){ 0返回null}返回unescape(文档。饼干。替换(新的RegExp((？^|.*;\\s*)'转义符(斯基).替换(/[\-\)。\ \*]/g，' \\$') '\\s*\\=\\s*(什么？[^;](?))*[^;]?).*'), '$1'));}，键：函数(nKeyId){ return unescape(document。饼干。替换(/\ s * \=(？(?))*$/, '').拆分(/\s*\=(？[^;](?))*[^;]?\ s */)[nKeyId])；}，setItem:函数(sKey，sValue) { if(！sKey){ return；}文档。cookie=escape(SKeY)'=' escape(SVaLue)'；到期=2038年一月19日星期二格林尼治时间03:14:07;路径=/';这个。长度=文档。饼干。匹配(/\=/g).长度；}，长度： 0，移除项目：函数(sKey) { if(！sKey ||！这个。hasown属性(Skey)){ return；}文档。cookie=escape(SkeY)'=；到期时间=1970年一月01日星期四00:00:00格林尼治时间；路径=/';这个。长度-；}，hasOwnProperty:函数(sKey) { return (new RegExp(？^|;\\s*)'转义符(斯基).替换(/[\-\)。\ \*]/g，' \\$') '\\s*\\=').测试(文档。饼干)；} };窗户。本地存储。长度=(文档。饼干。匹配(/\=/g)| |窗口。本地存储).长度；}}现在我们在自定义字符统计插件(jquery.charcount.js)中，添加方法storeWeibo()，首先我们判断当前浏览器是否支持localStorage，主流的浏览器如：铬合金、火狐、歌剧、狩猎以及IE 8都支持本地存储（本地存储)和会话存储（会话存储).

如果浏览器支持本地存储，那么我们可以直接调用localStorage的setItem()方法，将文本区域中的数据存储起来；当我们再次打开页面或浏览器，首先检查localStorage是否存储了相应的数据，如果有数据存储，那么我们再次把数据取出显示到文本区域中。

但由于一些用户可能使用旧版的浏览器（如：IE6和IE7)，考虑到兼容我们必须提供支持旧版浏览器的方案。

我们知道旧版浏览器（如：IE6和IE7)，它们支持饼干的持久化存储方式，所以我们使用饼干实现getItem()，setItem()和removeItem()等方法。

图5主流浏览器支持网络存储

现在，我们已经完成了字符统计插件jquery.charcount.js，由于时间的关系我们已经把发送框的界面设计好了，具体的超文本标记语言代码如下：

！-来自设计-身体形态id='形态'方法=' post' H2有什么新的东西要告诉你吗？/H2 div label class=' Mali _ oglas _ kategorija ' for=' message '有什么新消息要告诉你吗？/label text area id=' Weibo msg ' placeholder='请欣赏Fun '/text area span class=' counter '/span input onclick=' save cache()' type=' submit ' value=' publish '/div/form/body(9506 . 163.com)。

图6发送盒界面设计。

接下来，我们在页面代码中参考jQuery库和自定义字符统计插件jquery.charcount.js，具体代码如下：

！-添加Javascript引用-脚本类型=' text/JavaScript ' src=' http :http://Ajax . googleapis.com/Ajax/libs/jquery/1 . 6 . 1/jquery . min . js '/脚本类型=' text/JavaScript ' src=' http :/js/jQuery . char count . js '/脚本，我们直接参考Google提供的jQuery库，当然我们也在本地下载jQuery库，然后引入到项目中。接下来，我们将调用字符统计插件的代码添加到HTML页面中。具体代码如下：

！-文档就绪时调用charCount函数-脚本类型='text/javascript' $(文档)。ready(函数(){ //使用默认设置。$('#weiboMsg ')。char count()；});/script上面，我们已经在页面代码中完成了对字符统计插件的调用。每当我们在文本框中输入字符时，剩余的字符将实时显示，我们在文本框中输入的字符将保存在本地存储中。

接下来，我们分别在Chrome和Firefox中查看存储在localStorage中的数据。

首先，我们打开Chrome的“Ctr Shift I”，然后我们选择“资源”选项，然后我们可以看到存储在localStorage中的数据。

图7 Chrome的本地存储。

同样，我们打开火狐的“Firebug”(F12)，然后选择“DOM”选项。这时，我们需要找到窗口的对象localStorage，这样我们就可以看到存储在localStorage中的数据。

图8火狐的本地存储。

我们知道IE8也支持localStorage对象，但是当我做测试时，我发现IE8总是指示localStorage对象是未定义的。后来我在Stackoverflow上查了一下。有人说在IE8中，localStorage对象依赖于域名，所以需要在Web服务器中运行才能成功将数据保存在localStorage中。

我们注意到微博使用本地存储技术，将用户的数据保存在发送框中，一旦数据发送出去，本地存储就会被清空，否则用户的输入就会被保存。

通过微博发送框的例子，介绍了如何定义jQuery字符统计插件和本地存储技术。首先，我们知道限制用户输入是必要的，但是如何有效、人性化地提示用户限制输入呢？在这里，我们定义了一个jQuery插件来动态统计剩余字符数，希望能启发大家学习javascript编程。