位置: 编程技术 - 正文

js仿微博实现统计字符和本地存储功能(微博html代码)

编辑:rootadmin

推荐整理分享js仿微博实现统计字符和本地存储功能(微博html代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:仿微博系统,微博html代码,微博html代码,java仿微博,仿微博html,仿微博系统,html5仿微博代码,仿微博html,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

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

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

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

字符数统计插件会在输入框后创建一个同级元素span,它用来显示当前剩余字符数,当触发输入框的keyup、keydown和change事件时,实时修改span中剩余字符数,如果剩余字符数接近“warning”(接近零)修改CSS样式提示用户接近输入限制。

当剩余字符达到“warning”时,在span元素中添加相应的样式类,当剩余字符等于或大于输入限制时,添加相应的样式类提示用户已经超出字符数限制。

我们通过字符数统计插件在页面中动态地插入如下代码:

在默认情况下,字符限制是个,当可输入字符数少于等于个提示用户,当可输入字符数少于等于0时,提示用户字符数超出了限制。下面我们定义默认情况下条件对象:

上面,我们定义了defaults对象,它包含allowed、warning、css、cssWarning和cssExceeded等属性,通过修改defaults对象属性,我们可以很方便修改字符统计插件。

Allowed:允许输入的字符数。 Warning:提示用户剩余字符数接近限零。 Css:添加到counter元素的CSS样式类名。 cssWarning:警告提示样式。 cssExceeded:超出字符限制提示样式。

接下来,我们在字符统计插件中定义方法calculate(),它计算当前剩余字符数,如果到达了警告范围则在页面中增加样式类“warning”,当剩余字符数少于等于零时,在页面中增加样式“exceeded”。

我们又定义方法getLength(),当输入字符是中文时totLen加1,如果是英文字符或数字时totLen加0.5(默认允许输入个中文字符)。

接下来,我们在控件中绑定keyup(),keydown()和change()事件方法,当页面对象触发keyup(),keydown()或change()事件方法时,调用calculate()方法计算当前剩余的字符数,并且添加相应的CSS样式到页面中。

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,具体定义如下:

在现代浏览器中使用本地存储是非常的简单,我们只需在Javascript代码中直接调用localStorage对象的方法或属性就OK了。

上面,我们通过调用localStorage的setItem()和getItem()方法实现数据的存储和获取,由于localStorage是以Key/Value形式存储数据的,所以我们在存储时需要提供Key/Value值,然后调用getItem()方法获取存储在Key中的值。

由于本地存储是以Key/Value的形式进行存储的,那么我们可以很容易存储字符串类型的数据,如果我们需要存储对象类型,那么本地存储就显得捉襟见肘了。

假设,我们把一个student对象存储到localStorage中,具体代码如下:

js仿微博实现统计字符和本地存储功能(微博html代码)

图3 localStorage存储对象

通过上面示例,我们注意到在Firebug的控制台中输出的并不是真正的student对象,而是student对象的信息而已。

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

上面示例中,在存储student对象之前,我们使用JSON的stringify()方法序列化对象为JSON字符串,然后存储到localStorage中;如果我们要获取student对象,只需使用JSON的parse()方法反序列化字符串为对象。

图4 localStorage存储对象

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

现在我们在自定义字符统计插件(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代码如下:

图6 发送框界面设计

接下来,我们在页面代码中引用jQuery库和自定义字符统计插件jquery.charcount.js,具体代码如下:

上面,我们直接引用Google提供的jQuery库,当然我们也把jQuery库下载到本地,然后引入到项目中,接下来我们在HTML页面中添加调用字符统计插件的代码,具体代码如下:

上面,我们完成了在页面代码中调用字符统计插件,每当我们在文本框中输入字符时,都会实时地显示剩余的字符数,而且我们在文本框中输入的字符都会保存到localStorage中。

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

首先,我们打开Chrome的“开发者工具”(Ctr+Shift+I),然后我们选择“Resources”选项,这时我们就可以看到保存在localStorage中的数据了。

图7 Chrome的本地存储

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

图8 Firefox的本地存储

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

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

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

javascript动态添加checkbox复选框的方法 本文实例为大家介绍了javascript如何动态添加checkbox复选框:在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果。单纯的创建

javascript新闻跑马灯实例代码 本文实例为大家分享了javascript实现的跑马灯效果代码,实现了新闻公告之类的功能,下面提供了一段跑马灯实例供大家参考之用,希望能够对需要的朋

js判断文本框输入的内容是否为数字 如何验证文本框中的内容是否为数字,本文提供了三种方法,希望对大家的学习有所启发。在某些情况下可能需要让文本框中的内容只能够输入数字,

标签: 微博html代码

本文链接地址:https://www.jiuchutong.com/biancheng/386358.html 转载请保留说明!

上一篇:Bootstrap轮播加上css3动画,炫酷到底!(bootstrap轮播效果)

下一篇:javascript动态添加checkbox复选框的方法(js如何动态添加class)

  • 新公司未办税务怎么处理
  • 如何查询纳税人状态是否正常
  • 怎么证明自己是建档立卡贫困户
  • 租的房子装修费如何入账
  • 属于原始凭证的有哪些
  • 培训产生的费用
  • 增值税专用发票几个点
  • 缴纳社保的基数是什么意思
  • 小规模纳税人无进项票怎么办
  • 增值税加附加税加企业所得税加印花税是多少个税点
  • 房地产开发企业预缴增值税
  • 虚开增值税立案标准
  • 广告公司如何申报文化事业建设税
  • 贴现利息支付方式
  • 全年累积盈利交所得税吗?
  • 人防工程被出售,谁承担责任
  • 技术服务费属于现代服务吗
  • 有限责任公司减资的法律规定
  • 住宿费机打发票税率多少
  • 金税盘年费全额抵扣分录
  • 向公司一般户的银行借款怎么做账?
  • 3个点的发票有哪些
  • 企业所得税可以选择不弥补亏损吗
  • 个人申请补交个税怎么写
  • 应交税费借方余额怎么处理
  • 残疾人就业保障金申报时间
  • 冲红发票会计分录大全
  • 工会经费是不是应付职工薪酬
  • mac如何连接2个airpods
  • 通用pe工具箱安装教程
  • Win10 Build21376内测版发布 重新设计默认用户界面字体
  • mmtraylsi.exe是什么进程 有什么作用 mmtraylsi进程查询
  • 比较有用的sr
  • 地下开采对城区的影响
  • 大脊山,英格兰峰区国家公园 (© John Finney Photography/Moment/Getty Images)
  • pytorch example
  • netbeans ide 8.1
  • php 统计
  • 前端数据导出为excel
  • 百度地图 申请
  • 个体工商户季报还是月报
  • 购入固定资产的进项税额可以抵扣吗
  • 捐赠利得计入营业外收入吗?
  • 个人所得税专项附加扣除标准一览表
  • 打车费计入哪个科目
  • 外购应税消费品的纳税人是谁
  • mysql深入理解
  • 小规模纳税人可以做进出口贸易吗
  • 预付卡发票能否抵扣
  • 印花税按金额还是价税合计交
  • 建账的三个基本步骤
  • 运费和什么有关
  • mongodb操作
  • 注册资本在十年后怎么办
  • 开办费计入什么科盿
  • 未认证进项税额会计分录
  • 营销策划服务费属于什么服务
  • 财政拨付注册资金怎么填
  • 何为调整事项
  • 税控系统全额抵扣
  • 利用公式计算填空题
  • mysql语句删除表
  • sql server 批量删除
  • Linux下Mysql5.7.19卸载方法
  • ssh命令行登录服务器
  • 怎么知道游戏是什么引擎
  • windows 10移动版
  • linux系统的服务器,重启之后运算速度变慢
  • win10激活界面打不开
  • js时间日期
  • eclipse cocos2dx Command line too long
  • jquery动态设置css
  • 将网页改换成黑白
  • python开发者文档
  • jqueryui dialog
  • android xml文件有哪几种布局方式
  • 安卓网络管理类app
  • 无锡医疗保险缴费比例
  • 登录上海电子税务局显示获取公告失败
  • 关于啤酒包装物押金,下列正确的是( )
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设