插件 jQuery.Phoenix 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Phoenix 中文API文档

jQuery插件,通过HMTL5 Web Storage API将表单状态保存到本地存储 丢失的连接,崩溃的浏览器,破坏的验证 - 所有这些糟糕的丢失形式数据,你已经充满了爱和关怀。

Phoenix是一个jQuery插件,可以保存在本地表单字段中输入的数据,并在浏览器崩溃或页面意外刷新的情况下恢复它。

凤凰城将坏事远离你的形式。它非常小–3Kb(1Kb gziped),但功能强大。Phoenix使用HTML5 Web Storage API将表单字段值,复选框和单选按钮状态保存到浏览器本地存储。

如果Internet连接在任何时候脱机,浏览器崩溃,页面刷新或表单无法验证,填写表单的用户可以将表单恢复到他的上一个版本,而不是再次重新填充所有表单域。

够了!看一眼

要求

这是jQuery插件所以它需要jQuery。

安装

从源代码克隆,下载(缩小)或使用bower安装。

用法

  1. 需要jQuery
  2. 需要jquery.phoenix.js或其缩小版本
  3. $(‘input’).phoenix() - 施展魔法
  4. $(‘input’).phoenix(‘remove’) - 成功提交表格(或更多其他活动)的清晰存储空间

像这样的东西

<form id='stored-form'>
  <input type="text" class="phoenix-input" />
  <textarea type="text" class="phoenix-input"></textarea>
</div>

<script type="text/javascript">
  $('.phoenix-input').phoenix()
  $('#my-form').submit(function(e){
    $('.phoenix-input').phoenix('remove')
  })
</script>

请查看演示文件源以了解用法。

API

Phoenix提供简单但灵活的API。

选项

您可以在Phoenix初始化时传递选项对象。

$('.phoenix-input').phoenix({
    namespace: 'phoenixStorage',
    webStorage: 'sessionStorage',
    maxItems: 100,
    saveInterval: 1000,
    clearOnSubmit: '#stored-form',
    keyAttributes: ['tagName', 'id']
  })

可能的选择是:

  • namespace- webStorage命名空间(如果你不喜欢默认) - string : phoenixStorage,
  • webStorage - 使用的方法; sessionStorage或localStorage,(默认为localStorage) - 字符串:localStorage,
  • maxItems- 要存储的最大项目(每个表单字段是一个项目) - 整数:100,
  • saveInterval - 将字段值保存到localStorage(毫秒)的频率。如果是负数,则仅在调用save方法时保存字段- 整数:1000
  • clearOnSubmit- 表单选择器(当您提交此表单时,Phoenix将清理存储的项目) - 字符串:false
  • keyAttributes- 定义将使用哪些元素属性来查找要填充的正确元素 - array:[’tagName’, ‘id’, ’name’]

方法

当Phoenix初始化时,您可以使用API​​方法来管理它。调用方法$(selector).phoenix(‘methodName’),其中methodName之一是:

  • start- 开始保存计时器,它会每隔saveIntervalms 保存一次字段值(saveInterval是你记得的一个选项)
  • stop - 停止保存计时器
  • load - 从存储的项目到字段加载值
  • save - 保存从字段到存储项目的值
  • remove - 停止保存计时器并从localStorage中删除存储的项目

NB Phoenix不会自行从localStorage中删除存储的项目。因此,remove当您不再需要填写表单字段值时,请不要忘记调用事件,或者使用clearOnSubmit带有表单ID的选项。

活动

每个Phoenix方法调用都会触发您可以绑定的事件。例如

$('.phoenix-input').bind('phnx.loaded', function (e) {
  console.log('Data loaded... ')
})

事件命名非常明显,所以试试看

  • phnx.started
  • phnx.stopped
  • phnx.loaded
  • phnx.saved
  • phnx.removed

兼容性

浏览器

任何与HTML5 Web Storage API浏览器兼容的都可以与Phoenix配合使用。

  • Chrome 4+
  • Firefox 3.5+
  • Safary 4+
  • Opera 10.5+
  • IE 8+
  • 所有现代移动浏览器(Opera Mini除外)

CanIuse cheatsheet

其他插件

数十个插件使表单输入更加强大和漂亮。选择或选择二例如。你可以安全地在凤凰城使用它。只需确保在这些插件之前初始化Phoenix。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了