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


Posted in Javascript onDecember 22, 2015

随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了。

相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了。

例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数。

有一句话我们要牢记在心的是:凡是输入,必有限制;凡是输入,必须校验。

在接下来的文章中,我们将介绍如何实现输入字符实时提示功能和本地存储(localStorage)技术。

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

新浪微博是限制140个中文(280个英文),当然还有各种其他字符空格的情况,在用户输入达到限制之前或达到了,好的用户体验应该提示用户接近或达到了限制,当然我们可以通过使用不同颜色或加粗字体方式提示用户。

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

图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 的形式来存储数据的,如果关闭了页面或浏览器后,重新打开页面数据依然存在,它提供了数据的持久保存。一个简单的应用是:记录用户访问页面的次数。

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

图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'));

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

图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()方法反序列化字符串为对象。

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

图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()等方法。

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

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

图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>

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

图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中的数据了。

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

图7 Chrome的本地存储

同样,我们打开Firefox的“Firebug”(F12),然后我们选择“DOM”选项,这时我们需要查找window的对象localStorage,这样就可以看到保存在localStorage中的数据了。

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

图8 Firefox的本地存储

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

我们注意到微博通过本地存储技术,保存用户在发送框中的数据,一旦数据发送了就清空本地存储,反之保存用户的输入。

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

Javascript 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
js实现烟花特效
Mar 02 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 #Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 #Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 #Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 #Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 #Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 #Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 #Javascript
You might like
php正则替换处理HTML页面的方法
2015/06/17 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
JS实现滑动插件
2020/01/15 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python 文件管理实例详解
2015/11/10 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Php多进程实现代码
2018/05/07 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
使用django实现一个代码发布系统
2019/07/18 Python
对python中return与yield的区别详解
2020/03/12 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
学校联谊活动方案
2014/02/15 职场文书
暑期培训心得体会
2014/09/02 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
Python开发五子棋小游戏
2022/05/02 Python