ホームページ > 記事 > ウェブフロントエンド > jsでWeiboを模倣して統計文字とローカルストレージ機能を実装_JavaScriptスキル
モバイル デバイスや Web アプリケーションの普及に伴い、ユーザーが使いやすくするために、Web ページやアプリケーションに対するユーザー エクスペリエンスの要件はますます高くなっています。これは実際にユーザーが選択することを好む傾向にあります。優れたユーザーエクスペリエンスを備えた製品であるため、開発者としては、より人間らしいアプリケーションを開発する必要があります。
Weibo のようなソーシャル プラットフォームでは、優れたユーザー エクスペリエンスが特に重要になっています。
例: Weibo に投稿すると、テキスト ボックスに残りの文字数がリアルタイムで表示されます。この人間的なプロンプトにより、ユーザーは Weibo の文字数制限を理解しやすくなり、文字数も制限されます。ユーザーが入力できるようになります。
心に留めておくべきことわざがあります。すべての入力には制限が必要であり、すべての入力には検証が必要です。
次回は、文字入力のリアルタイムプロンプト機能とローカルストレージ(localStorage)技術の実装方法を紹介します。
1. jQuery 文字統計プラグイン
ここでは、Sina Weibo の Weibo 入力ボックスを例として、jQuery を使用してユーザーに残りの文字数をリアルタイムで入力する方法を紹介します。
Sina Weibo には中国語 140 文字 (英語 280 文字) という制限があります。もちろん、ユーザーの入力が制限に達するか、制限に達する前に、ユーザーにアプローチを促す必要があります。もちろん、制限に達した場合は、別の色や太字のフォントを使用してユーザーに通知することもできます。
図 1 Sina Weibo ユーザー入力制限
文字数統計プラグインは、入力ボックスの後に兄弟要素のスパンを作成します。これは、入力ボックスのキーアップ、キーダウン、および変更イベントがトリガーされたときに、その数値を表示するために使用されます。スパン内の残りの文字数が「警告」に近い (ゼロに近い) 場合は、入力制限に近づいていることをユーザーに通知するように CSS スタイルを変更します。
残りの文字数が「警告」に達した場合、span 要素に対応するスタイル クラスを追加します。 残りの文字数が入力制限以上の場合、対応するスタイル クラスを追加して、文字数制限があることをユーザーに通知します。超えてしまった。
文字カウント プラグインを使用して、次のコードをページに動的に挿入します:
<!-- adds element dynamic --> <span class="counter">140</span>
デフォルトでは、文字制限は 140 です。入力文字数が 25 以下の場合は、ユーザーにプロンプトが表示されます。入力文字数が 0 以下の場合は、ユーザーに次のプロンプトが表示されます。文字数が制限を超えています。以下では、デフォルトで条件オブジェクトを定義します:
// The default limitation. var defaults = { allowed: 140, warning: 25, css: 'counter', counterElement: 'span', cssWarning: 'warning', cssExceeded: 'exceeded', counterText: '' };
上記では、allowed、warning、css、cssWarning、cssExceeded などの属性を含むデフォルト オブジェクトを定義しました。デフォルト オブジェクトの属性を変更することで、文字統計プラグインを簡単に変更できます。
次に、文字統計プラグインでメソッド Calculate() を定義します。このメソッドは、現在の残りの文字数を計算し、警告範囲に達した場合にページにスタイル クラス「warning」を追加します。残りの文字数が 0 以下の場合は、スタイル「exceeded」をページに追加します。
/*** * Calculates the char * @param obj */ function calculate(obj) { // Get the count. var count = getLength($(obj).val()); var available = options.allowed - count; if (available <= options.warning && available >= 0) { $(obj).next().addClass(options.cssWarning); } else { $(obj).next().removeClass(options.cssWarning); } if (available < 0) { $(obj).next().addClass(options.cssExceeded); } else { $(obj).next().removeClass(options.cssExceeded); } $(obj).next().html(options.counterText + available); }
メソッド getLength() も定義します。入力文字が中国語の場合、totLen は 1 増加します。英語の文字または数字の場合、totLen は 0.5 増加します (デフォルトでは 140 文字の中国語を入力できます)。
/** * Get the length of char. * @param str * @return {Number} */ function getLength(str) { var totLen = 0; for (var i = 0; i < str.length; i++) { // If the char is Chinese. if (str.charCodeAt(i) > 256) { totLen += 1; } else { totLen += 0.5; } } return Math.floor(totLen); }
次に、コントロール内で keyup()、keydown()、change() イベント メソッドをバインドします。ページ オブジェクトが keyup()、keydown()、または change() イベント メソッドをトリガーするときに、calculate() を呼び出します。メソッド 現在の残りの文字数を計算し、対応する CSS スタイルをページに追加します。
// Binds text area keyup, keydown and change event. this.each(function() { $(this).after('<' + options.counterElement + ' class="' + options.css + '">' + options.counterText + '</' + options.counterElement + '>'); calculate(this); $(this).keyup(function() { calculate(this), storeWeibo(this) }); $(this).keydown(function() { calculate(this), storeWeibo(this) }); $(this).change(function() { calculatea(this) }); });
2、Web Storage
现在,我们基本实现了jQuery字符数统计插件功能了,相信许多人都注意到,如果我们在发微博时,没有发送出去的微博下次打开页面,发送框依然保存着我们未发送的微博,即使关闭浏览器重新打开页面,我们没发送的信息依然存在。
其实,要实现这一个功能方法是多种多样的,例如我们可以使用:Cookies,Session等技术。
随着HTML5规范的制定,与此同时W3C制定了网络存储(Web Storage)的规范,它提供将数据存储在客户端中,直到Session过期(会话存储)或超出本地容量(本地存储),它比传统的Cookies存储功能更强大、更容易实现和容量更大(大部分浏览器支持5M的本地存储)。
会话存储
会话存储:它将数据保存在会话中,一旦我们关闭浏览器选项卡时,会话中的数据将失效。
本地存储
本地存储:当数据需要持久地保存在客户端中,这时我们可以使用本地存储(Local Storage),它是以key/value 的形式来存储数据的,如果关闭了页面或浏览器后,重新打开页面数据依然存在,它提供了数据的持久保存。一个简单的应用是:记录用户访问页面的次数。
图2存储空间的对比
接下来,我们将介绍如何使用本地存储保存用户数据。
由于,localStorage提供了setItem(),getItem(),removeItem(),key()和clear() 5个方法,和一个属性length,具体定义如下:
// Storage definition. interface Storage { readonly attribute unsigned long length; DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any value); deleter void removeItem(in DOMString key); void clear(); };
在现代浏览器中使用本地存储是非常的简单,我们只需在Javascript代码中直接调用localStorage对象的方法或属性就OK了。
// stores the username 'jkrush', // then get the username. localStorage.setItem('username', 'jkrush'); var userName = localStorage.getItem('username');
上面,我们通过调用localStorage的setItem()和getItem()方法实现数据的存储和获取,由于localStorage是以Key/Value形式存储数据的,所以我们在存储时需要提供Key/Value值,然后调用getItem()方法获取存储在Key中的值。
由于本地存储是以Key/Value的形式进行存储的,那么我们可以很容易存储字符串类型的数据,如果我们需要存储对象类型,那么本地存储就显得捉襟见肘了。
假设,我们把一个student对象存储到localStorage中,具体代码如下:
// Defines a student object. var student = { name: 'JK_Rush', age: '26', sex: 'male' }; // Prints student object console.log(student); // Stores student object. // Gets student object again. localStorage.setItem('student', student); console.log(localStorage.getItem('student'));
图3 localStorage存储对象
通过上面示例,我们注意到在Firebug的控制台中输出的并不是真正的student对象,而是student对象的信息而已。
那么我们该如何把对象存储到localStorage中呢?其实,我们可以把对象序列化为JSON数据进行存储,最后通过反序列化把JSON数据转换为对象。具体实现如下:
// Defines a student object. var student = { name: 'JK_Rush', age: '26', sex: 'male' }; console.log(student); // Serializes the object to json string. localStorage.setItem('student', JSON.stringify(student)); // Deserializes the json string to object. console.log(JSON.parse(localStorage.getItem('student')));
上面示例中,在存储student对象之前,我们使用JSON的stringify()方法序列化对象为JSON字符串,然后存储到localStorage中;如果我们要获取student对象,只需使用JSON的parse()方法反序列化字符串为对象。
图4 localStorage存储对象
上面,我们实现了student对象转换为JSON格式字符串存储到localStorage中,接下来,我们在前面的例子中添加localStorage功能,具体代码如下:
/** * Store user data into local storage. * @param obj */ function storeWeibo(obj) { // Checks the browser supports local storage or not. if (window.localStorage) { localStorage.setItem('publisherTop_word', $(obj).val()); } else { // For instance, ie 6 and 7 do not support local storage, // so we need to provider other way. window.localStorage = { getItem: function(sKey) { if (!sKey || !this.hasOwnProperty(sKey)) { return null; } return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); }, key: function(nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); }, setItem: function(sKey, sValue) { if (!sKey) { return; } document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; this.length = document.cookie.match(/\=/g).length; }, length: 0, removeItem: function(sKey) { if (!sKey || !this.hasOwnProperty(sKey)) { return; } document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; this.length--; }, hasOwnProperty: function(sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); } }; window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; } }
现在我们在自定义字符统计插件(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 id="form" method="post"> <h2> 有什么新鲜事想告诉大家?</h2> <div> <label class="mali_oglas_kategorija" for="message"> 有什么新鲜事想告诉大家?<b></b></label> <textarea id="weiboMsg" placeholder="请Fun享"></textarea> <span class="counter"></span> <input onclick="SaveCache()" type="submit" value="发布"> </div> </form> </body>
图6 发送框界面设计
接下来,我们在页面代码中引用jQuery库和自定义字符统计插件jquery.charcount.js,具体代码如下:
<!-- Adds Javascript reference --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="./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的本地存储
同样,我们打开Firefox的“Firebug”(F12),然后我们选择“DOM”选项,这时我们需要查找window的对象localStorage,这样就可以看到保存在localStorage中的数据了。
图8 Firefox的本地存储
我们知道IE8也是支持localStorage对象的,但是我做测试时候发现IE8中一直提示localStorage对象未定义,后来我上Stackoverflow查看了一下,有人说在IE8中,localStorage对象是依赖于域名的,所以需要运行在Web服务器中才可以成功保存数据到localStorage中。
我们注意到微博通过本地存储技术,保存用户在发送框中的数据,一旦数据发送了就清空本地存储,反之保存用户的输入。
本文通过微博发送框例子介绍了如何定义jQuery字符统计插件和本地存储技术,首先,我们知道限制用户输入是必须的,但如何有效而且人性化提示用户输入限制呢?这里我们通过定义一个jQuery插件,动态地统计剩余字符数,希望对大家学习javascript程序设计有所启发。