阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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。

      目录
      目录