Set cookie and get cookie with JavaScript

Question

I m trying to set a cookie depending on which CSS file I choose in my HTML  I have a form with a list of options  and different CSS files as values  When I choose a file  it should be saved to a cookie for about a week  The next time you open your HTML file  it should be the previous file you ve chosen   JavaScript code   function cssLayout         document getElementById  css   href   this value      function setCookie        var date   new Date  Februari 10  2013        var dateString   date toGMTString        var cookieString    Css document getElementById  css   href    dateString      document cookie   cookieString     function getCookie        alert document cookie       HTML code    lt form gt      Select your css layout  lt br gt       lt select id  myList  gt           lt option value  style-1 css  gt CSS1 lt  option gt           lt option value  style-2 css  gt CSS2 lt  option gt             lt option value  style-3 css  gt CSS3 lt  option gt           lt option value  style-4 css  gt CSS4 lt  option gt       lt  select gt   lt  form gt

User · Answer

I m sure this question should have a more general answer with some reusable code that works with cookies as key-value pairs   This snippet is taken from MDN and probably is trustable  This is UTF-safe object for work with cookies   var docCookies       getItem  function  sKey        return decodeURIComponent document cookie replace new RegExp                s     encodeURIComponent sKey  replace    -        g       amp         s      s                       1       null         setItem  function  sKey  sValue  vEnd  sPath  sDomain  bSecure        if   sKey         expires max -age path domain secure   i test sKey     return false        var sExpires           if  vEnd          switch  vEnd constructor            case Number            sExpires   vEnd     Infinity      expires Fri  31 Dec 9999 23 59 59 GMT       max-age     vEnd            break          case String            sExpires      expires     vEnd            break          case Date            sExpires      expires     vEnd toUTCString              break                    document cookie   encodeURIComponent sKey          encodeURIComponent sValue    sExpires    sDomain      domain     sDomain          sPath      path     sPath          bSecure      secure             return true         removeItem  function  sKey  sPath  sDomain        if   sKey     this hasItem sKey     return false        document cookie   encodeURIComponent sKey        expires Thu  01 Jan 1970 00 00 00 GMT      sDomain      domain     sDomain           sPath      path     sPath            return true         hasItem  function  sKey        return  new RegExp          s      encodeURIComponent sKey  replace    -        g       amp         s        test document cookie          keys     optional method  you can safely remove it     function          var aKeys   document cookie replace         s                    s   s                 1    g      split   s               s         for  var nIdx   0  nIdx  lt  aKeys length  nIdx      aKeys nIdx    decodeURIComponent aKeys nIdx          return aKeys           Mozilla has some tests to prove this works in all cases   There is an alternative snippet here

User · Answer

These are much much better references than w3schools  the most awful web reference ever made    How cookies work  quirksmode org  MDN document cookie  Examples derived from these references     sets the cookie cookie1 document cookie    cookie1 test  expires Sun  1 Jan 2023 00 00 00 UTC  path        sets the cookie cookie2  cookie1 is  not  overwritten  document cookie    cookie2 test  expires Sun  1 Jan 2023 00 00 00 UTC  path        remove cookie2 document cookie    cookie2   expires Thu  01 Jan 1970 00 00 00 UTC  path     The Mozilla reference even has a nice cookie library you can use

User · Answer

Check JavaScript Cookies on W3Schools com for setting and getting cookie values via JS   Just use the setCookie and getCookie methods mentioned there   So  the code will look something like    lt script gt  function setCookie c name  value  exdays        var exdate   new Date        exdate setDate exdate getDate     exdays       var c value   escape value      exdays    null            expires     exdate toUTCString         document cookie   c name         c value     function getCookie c name        var i  x  y  ARRcookies   document cookie split           for  i   0  i  lt  ARRcookies length  i              x   ARRcookies i  substr 0  ARRcookies i  indexOf                y   ARRcookies i  substr ARRcookies i  indexOf        1           x   x replace    s   s   g               if  x    c name                return unescape y                      function cssSelected         var cssSelected       myList   0  value      if  cssSelected      select             setCookie  selectedCSS   cssSelected  3              document  ready function             myList   0  value   getCookie  selectedCSS        lt  script gt   lt select id  myList  onchange  cssSelected     gt       lt option value  select  gt --Select-- lt  option gt       lt option value  style-1 css  gt CSS1 lt  option gt       lt option value  style-2 css  gt CSS2 lt  option gt       lt option value  style-3 css  gt CSS3 lt  option gt       lt option value  style-4 css  gt CSS4 lt  option gt   lt  select gt

User · Answer

I find the following code to be much simpler than anything else  function setCookie name value days        var expires    quot  quot       if  days            var date   new Date            date setTime date getTime      days 24 60 60 1000            expires    quot   expires  quot    date toUTCString              document cookie   name    quot   quot     value     quot  quot      expires    quot   path   quot     function getCookie name        var nameEQ   name    quot   quot       var ca   document cookie split           for var i 0 i  lt  ca length i              var c   ca i           while  c charAt 0        c   c substring 1 c length           if  c indexOf nameEQ     0  return c substring nameEQ length c length             return null    function eraseCookie name           document cookie   name      Path    Expires Thu  01 Jan 1970 00 00 01 GMT       Now  calling functions setCookie  ppkcookie   testcookie  7    var x   getCookie  ppkcookie    if  x         do something with x     Source - http   www quirksmode org js cookies html They updated the page today so everything in the page should be latest as of now

[javascript] Set cookie and get cookie with JavaScript

Examples related to javascript

Examples related to html

Examples related to css

Examples related to cookies