ใช้งาน cookie บน javascript กับภาษาไทย

By: leknarm on 14:40

Share it Please

Tweet

เผอิญได้โจทย์มาว่าใน contact form user นั้นควรกรอกแค่ครั้งเดียว ครั้งต่อไปเข้ามาหน้า contact ก็ไม่ควรต้องกรอกอีก ซึ่งผู้ที่จะกรอกนั้นจะเป็น anonymous ดังนั้นวิธีการที่จะทำให้หน้า contact จำค่าได้ก็คงต้องใช้ cookie

ปัญหาคือหน้า contact form นั้นอยู่ใน drupal ซึ่งเมื่อเปิด page cache แล้วมันจะทำให้ใช้งาน cookie สำหรับ anonymous ไม่ได้ ดังนั้นเลยต้องเลี่ยงไปใช้ cookie ของ javascript แทน

จาก tutorial http://www.w3schools.com/JS/js_cookies.asp ก็ดูเหมือนจะทำงานได้ดีแต่พอเรานำไปใช้จริงและกรอกค่าใน form เป็นภาษาไทย ผลลัพธ์ก็คือ ภาษาไทยเละ ดังนั้นเราจึงต้อง customize code กันนิดหน่อยเพื่อให้ใช้งานภาษาไทยได้

original code

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length+1;
      c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) 
        c_end = document.cookie.length
      return unescape(document.cookie.substring(c_start,c_end));
    }
  }
  return "";
}

function setCookie(c_name, value,expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie = c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

customized code

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length+1;
      c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) 
        c_end = document.cookie.length
      return decodeURIComponent(document.cookie.substring(c_start,c_end));
    }
  }
  return "";
}

function setCookie(c_name, value,expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie = c_name+ "=" +encodeURIComponent(value)+((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

เพื่อให้ใช้งานภาษาไทยได้ ต้องใช้ function encodeURIComponent แทน function escape แต่ปัญหายังไม่หมดแค่นี้ เมื่อเรา getCookie ที่ภายใน text นั้นมี space เข้ามาใช้งาน space ที่เคยพิมพ์เข้าไปจะกลายเป็นเครื่องหมาย + แทน ดังนั้นเราต้อง replace มันก่อนที่จะนำไปใช้งานด้วย

getCookie('c_name').replace(/\+/g, " ")

ซึ่ง /\+/ นั้นหมายถึงเครื่องหมาย + และ g หมายถึงให้ replace ทั้ง string