少女祈禱中...
Loading...

ccloli

cc是个loli,你也可以叫她傲娇

调用Storage自动填充用户数据+自动保存输入评论草稿

几天前终于觉得原来的Pixiv Custom主题太坑了,便换了Linor这个主题(好吧其实是找不到什么好的主题……)。经过一番捣鼓,弄好了诸如邮件提醒、顶部图片、防机器人等等杂七杂八的东西……不过主题上线没几天,便有反馈说每次评论都要重新输入姓名邮箱。懒得查主题的源码+闲着无聊花了半个小时完成了自动填充用户数据功能,顺便还附带自动保存输入的评论以防手贱刷新……

首先,提到存储数据,个人想到的就是调用HTML5 Storage储存。Storage分为localStorage和sessionStorage,前者可以一直保存输入的数据直至用户清理HTML5数据,而后者则会在会话关闭(即关闭网页但不包括刷新、转至其他页面)时清除数据。所以整体说来实现并不难,废话不多说,直接上源码,然后睡觉/ \

  1. //comment.php
  2. <script>
  3. if(document.getElementById('author')){ //如果未登录(有昵称输入框)则填充用户数据
  4.     if(window.localStorage.getItem('author'))document.getElementById('author').value=window.localStorage.getItem('author');
  5.    if(window.localStorage.getItem('email'))document.getElementById('email').value=window.localStorage.getItem('email');
  6.    if(window.localStorage.getItem('url'))document.getElementById('url').value=window.localStorage.getItem('url');
  7. }
  8. if(window.sessionStorage.getItem(document.getElementsByTagName('article')[0].getAttribute('id')+'_comment'))document.getElementById('comment').value=window.sessionStorage.getItem(document.getElementsByTagName('article')[0].getAttribute('id')+'_comment'); //如果有评论草稿则填入评论框
  9. function savedata(){
  10.    if(document.getElementById('author')){ //如果未登录则储存用户数据
  11.       window.localStorage.setItem('author',document.getElementById('author').value);
  12.       window.localStorage.setItem('email',document.getElementById('email').value);
  13.       window.localStorage.setItem('url',document.getElementById('url').value);
  14.    }
  15.    window.sessionStorage.removeItem(document.getElementsByTagName('article')[0].getAttribute('id')+'_comment'); //提交时清除评论草稿
  16.    ifpost='true' //定义已提交评论 (2013.4.14 13:20更新:移除"ifpost"前的"var")
  17. }
  18. document.getElementById('submit').onclick=function(event){savedata()} //点击发表按钮同时储存用户数据
  19. function savecomment(){
  20.    if(ifpost!='true'||!ifpost){ //如果未提交评论
  21.       window.sessionStorage.setItem(document.getElementsByTagName('article')[0].getAttribute('id')+'_comment',document.getElementById('comment').value);
  22.       setTimeout(function(){savecomment()},1000) //每隔1000ms储存一次评论草稿
  23.    }
  24. }
  25. setTimeout(function(){savecomment()},1000)
  26. </script>


评论之所以用sessionStorage而不是localStorage的原因是使用localStorage会出现大量的冗杂数据,也就是说即使你没有输入评论,但数据仍会储存,最终会像贴吧的localStorage那样冗杂,而且站内文章并没有设置在新标签页中打开链接,所以也没什么必要(除非你真的手贱关掉了页面/ \所以从这个角度看localStorage更好,但我懒得实现自动清理数据了)。

至于为什么不弄成输入评论时才调用存储……好吧我懒了/ \而且如果欲存储的数据和原数据一样是不会触发事件的……而且刚刚有想过实现,但是只能想出这一行代码:document.getElementById('comment').onclick=function(event){setTimeout(function(){savecomment()},1000)},这就意味着如果某人死命点评论框的话……

好吧大致如上,如果有什么好的方法再补充……

另外…… @天羽酱 求破← ←从来没见过这么大的游戏,而且还只是GalGame,这么大只在爱丽丝疯狂回归上见过……好吧我承认我不玩游戏OTL……还有,感兴趣的话帮我汉化吧← ←此人日文废……

  1. 天羽酱说道:

    不存在cookies里么?
    我则是存在服务器端的session里面
    然后把cookies里的session标识强制设置一个过期时间
    我为啥要给你汉化=_=

    Android Webkit Android Webkit Android 4.0.4 Android 4.0.4
    1. 864907600cc说道:

      @天羽酱 cookie操作好像很麻烦的样子,反正是本地操作,用storage就好,只不过如果是公用电脑的话…
      ……我是看你的头像才下载的!QAQ

      Unknown Unknown Unknown Unknown
      1. 天羽ちよこ说道:

        @864907600cc 我倒感觉cookie比乃这个storage简单很多….
        当然最简单的还是存在服务端session里了啊哈哈哈哈

        Google Chrome 27.0.1453.47 Google Chrome 27.0.1453.47 GNU/Linux x64 GNU/Linux x64
        1. 864907600cc说道:

          @天羽ちよこ 喂喂喂,重点是那个毫无用途的自动保存评论草稿功能啊← ←你可以试着在评论框输入几个字然后刷新……

          Google Chrome 26.0.1410.43 Google Chrome 26.0.1410.43 Windows 7 x64 Edition Windows 7 x64 Edition
          1. 天羽ちよこ说道:

            @864907600cc 我不会没事做刷新的 = =

            Google Chrome 27.0.1453.47 Google Chrome 27.0.1453.47 GNU/Linux x64 GNU/Linux x64
            1. 864907600cc说道:

              @天羽ちよこ 好吧← ←刚刚发现代码似乎有错误……debug中……

              Google Chrome 26.0.1410.43 Google Chrome 26.0.1410.43 Windows 7 x64 Edition Windows 7 x64 Edition
          2. 天羽ちよこ说道:

            @864907600cc 就算是cookies也能保存草稿的…..而且代码不超过10行…..

            Google Chrome 27.0.1453.73 Google Chrome 27.0.1453.73 GNU/Linux x64 GNU/Linux x64
            1. 864907600cc说道:

              @天羽ちよこ 不会操作 cookie _(:з」∠)_

              Google Chrome 26.0.1410.64 Google Chrome 26.0.1410.64 Windows 7 x64 Edition Windows 7 x64 Edition
  2. 千与琥珀说道:

    现在反正用cookie本地储存还是主流,html5的话貌似还是有点坑

    现在妹妹 的Bd版? 好吧,硬盘君表示淡定(其实有点太小了点吧 6*2.5的包才是王道
    天羽君是看到不是R-18就果断坑了吗?

    Google Chrome 26.0.1410.64 Google Chrome 26.0.1410.64 Windows 7 Windows 7
    1. 864907600cc说道:

      @千与琥珀 ie8是最早支持storage的,还怕其他浏览器不支持?- -except [lte ie 7]
      3*2.2的mdx虚拟镜像压缩包
      是啊,r-18有什么好- –

      Unknown Unknown Unknown Unknown
    2. 天羽ちよこ说道:

      @千与琥珀 才不是呢….我现在正参与我头像这个gal的汉化….

      Google Chrome 27.0.1453.47 Google Chrome 27.0.1453.47 GNU/Linux x64 GNU/Linux x64
      1. 864907600cc说道:

        @天羽ちよこ 搅洗咩← ←

        Google Chrome 26.0.1410.43 Google Chrome 26.0.1410.43 Windows 7 x64 Edition Windows 7 x64 Edition
    3. 天羽ちよこ说道:

      @千与琥珀 这作的声优阵容很强大喔

      Google Chrome 27.0.1453.47 Google Chrome 27.0.1453.47 GNU/Linux x64 GNU/Linux x64
      1. 864907600cc说道:

        @天羽ちよこ 不感兴趣← ←

        Google Chrome 26.0.1410.43 Google Chrome 26.0.1410.43 Windows 7 x64 Edition Windows 7 x64 Edition
  3. 864907600cc说道:

    debug测试QAQ……

    Google Chrome 26.0.1410.43 Google Chrome 26.0.1410.43 Windows 7 x64 Edition Windows 7 x64 Edition
  4. Jak Wings说道:

    我个人觉得保存回复没有必要~谁这么喜欢时不时打一大堆字的回复,或者经常按错刷新~

    Google Chrome 27.0.1453.12 Google Chrome 27.0.1453.12 GNU/Linux x64 GNU/Linux x64
    1. 864907600cc说道:

      @Jak Wings 闲着无聊玩玩而已/ \

      Google Chrome 26.0.1410.43 Google Chrome 26.0.1410.43 Windows 7 x64 Edition Windows 7 x64 Edition
  5. lovee说道:

    偶是进来围观妖精社新作的ww

    Safari 6.0.3 Safari 6.0.3 Mac OS X  10.8.3 Mac OS X 10.8.3
    1. Jak Wings说道:

      @lovee T_T 路过围观用 MacbookPro 的姐,围观你的博客完毕,感觉教程没分类以后翻页啥的可能会很麻烦。

      Google Chrome 27.0.1453.12 Google Chrome 27.0.1453.12 GNU/Linux x64 GNU/Linux x64
      1. lovee说道:

        @Jak Wings 事实上偶已经很久没有写教程了而且以后估计也不会写了w

        Safari 6.0.4 Safari 6.0.4 Mac OS X  10.8.3 Mac OS X 10.8.3
  6. 天羽ちよこ说道:

    我的新博客垃圾评论是这样处理的:
    凡是不包含中文字符的通通杀掉
    二是在页面上加了一个验证input type=”hidden” id=”spam” name=”spam” value=”0″
    点击提交时会调用js把value改成1
    所以那些用机器提交的都会挂掉
    除了用按键精灵的
    再不行就验证ua
    凡是包含ie的都杀掉

    Google Chrome 27.0.1453.73 Google Chrome 27.0.1453.73 GNU/Linux x64 GNU/Linux x64
    1. 864907600cc说道:

      @天羽ちよこ
      1. 如果某位只是想发个链接那就杯具了,之前我也是这么设定但也确实遇到了这个情况
      2. 这个是我之前的方法,对于我已经失效,只能人工
      3. IE 党好可怜_(:з」∠)_
      4. 你忽视了 Pingback/Traceback ……

      Google Chrome 26.0.1410.64 Google Chrome 26.0.1410.64 Windows 7 x64 Edition Windows 7 x64 Edition
      1. 天羽ちよこ说道:

        @864907600cc 1.我才不管 2.××× 3.IE根本就不能正常访问我那博客 4.我的“博客”不是博客,所以那是什么?可以吃么?

        Google Chrome 27.0.1453.73 Google Chrome 27.0.1453.73 GNU/Linux x64 GNU/Linux x64
        1. 864907600cc说道:

          @天羽ちよこ 汝忘记了有个东西叫做 IE10……
          给 Java 党跪了 OTL 话说这速度你真的受得了?

          Google Chrome 28.0.1485.0 Google Chrome 28.0.1485.0 Windows XP Windows XP
          1. 天羽ちよこ说道:

            @864907600cc 无视IE,苏州电信表示速度还行

            Google Chrome 27.0.1453.73 Google Chrome 27.0.1453.73 GNU/Linux x64 GNU/Linux x64
            1. 864907600cc说道:

              @天羽ちよこ 我指的是数据库连接速度

              Google Chrome 26.0.1410.64 Google Chrome 26.0.1410.64 Windows 7 x64 Edition Windows 7 x64 Edition
              1. 天羽ちよこ说道:

                @864907600cc 没感觉到异常。。。现在的人真是的,连一秒钟都等不了。。╮(╯▽╰)╭

                Google Chrome 27.0.1453.73 Google Chrome 27.0.1453.73 GNU/Linux x64 GNU/Linux x64
                1. 864907600cc说道:

                  @天羽ちよこ 你又无视了安卓QAQ

                  Android Webkit 4.0 Android Webkit 4.0 Android 2.2 Android 2.2
  7. Dale Deloney说道:

    Dale Deloney[url=(调用文章设置中的原文链接项)

    ]Dale Deloney[/url](调用文章设置中的原文链接项)

    Google Chrome 24.0.1312.57 Google Chrome 24.0.1312.57 Windows 7 Windows 7