js仿微博實現統計字元和本地儲存功能_javascript技巧-js教程-PHP中文網

隨著行動裝置和Web應用程式的普及，為了更好的便於使用者的使用，對於網頁或應用程式的使用者體驗要求就越來越高，確實是這樣，作為使用者更喜歡選擇使用者體驗效果好的網站或應用程序，所以作為開發者的我們就需要開發出更人生化的應用程式了。

相信許多人有使用微博的經驗，像微博這樣的社群平台，好的使用者體驗就變得尤其重要了。

例如：我們在發微博時，文字框會即時地提示我們剩餘字元數，這樣人性化的提示方便了用戶知道微博字數的限制，同時也限制了用戶的輸入字數。

有一句話我們要牢記在心的是：凡是輸入，必有限制；凡是輸入，必須校驗。

在接下來的文章中，我們將介紹如何實現輸入字元即時提示功能和本機儲存（localStorage）技術。

1、jQuery字元統計外掛程式
現在，我們以新浪微博發送微博輸入框為例子，介紹使用jQuery實現即時提示使用者剩餘字元數。

新浪微博是限制140個中文（280個英文），當然還有各種其他字符空格的情況，在用戶輸入達到限制之前或達到了，好的用戶體驗應該提示用戶接近或達到了限制，當然我們可以透過使用不同顏色或加粗字體方式來提示使用者。

圖1新浪微博用戶輸入限制

字元數統計插件會在輸入框後面建立一個同級元素span，它用來顯示當前剩餘字元數，當觸發輸入框的keyup、keydown和change事件時，即時修改span中剩餘字元數，如果剩餘字元數接近「warning」（接近零）修改CSS樣式提示使用者接近輸入限制。

當剩餘字元達到「warning」時，在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: ''
};

登入後複製

上面，我們定義了defaults對象，它包含allowed、warning、css、cssWarning和cssExceeded等屬性，透過修改defaults物件屬性，我們可以很方便地修改字元統計插件。

Allowed：允許輸入的字元數。
Warning：提示使用者剩餘字元數接近限零。
Css：新增到counter元素的CSS樣式類別名稱。
cssWarning：警告提示樣式。
cssExceeded：超出字元限制提示樣式。

接下來，我們在字元統計插件中定義方法calculate()，它計算當前剩餘字元數，如果到達了警告範圍則在頁面中增加樣式類“warning”，當剩餘字元數少於等於零時，在頁面中增加樣式“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("(&#63;:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g,
       "\\$&") + "\\s*\\=\\s*((&#63;:[^;](&#63;!;))*[^;]&#63;).*"), "$1"));
   },
   key: function(nKeyId) {
    return unescape(document.cookie.replace(/\s*\=(&#63;:.(&#63;!;))*$/, "").split(/\s*\=(&#63;:[^;](&#63;!;))*[^;]&#63;;\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("(&#63;:^|;\\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程序设计有所启发。