Javascript Cookies not working in Safari

问题

I've been trying to implement a basic cookie storage function in Javascript, which works as intended in most browsers, but not Safari (8.0.3). I've stripped it down to the below example, where every other browser changes the text to the date that is stored in the cookie, but Safari doesn't store a cookie at all and gives out an empty string (no error messages in the console either). Safari is set to accept all cookies.

If I enter the code in the testbed at W3Schools.com, it works in every browser, so is it somehow related to the domain? (In JSFiddle it doesn't seem to work at all, with the console complaining that myFunction is not defined.)

I've only found two older problems of the same type, but in one case the solution was adding the "; path=/" part, which is already in here, and in the other there was a comma in place of a semicolon.

<!DOCTYPE html>
<html>
<body>
<p id="doesitwork" onclick="myFunction()">Does it work?</p>
<script>
function myFunction() {
    d = new Date();
    document.cookie = (d + "; expires=" + "May 31 2016 23:59:59 GMT+09:00" + "; path=/");
    var x = document.cookie;
    document.getElementById("doesitwork").innerHTML = x;
}
</script>
</body>
</html>

回答1:

Well you are not setting a name value pair

document.cookie = (d + "; expires=" + "May 31 2016 23:59:59 GMT+09:00" + "; path=/");

should be something like

document.cookie = "time=" + d + "; expires=" + "May 31 2016 23:59:59 GMT+09:00" + "; path=/";

回答2:

By default cookie not allowed for iOS safari browser. We have to enable cookies setting from safari browser

So we have implemented local storage(java script concept)to overcome the cookie problems in safari browser.

回答3:

You can have a look at this nice article and they show you a function for creating, reading and deleting cookies also it shows pure JS and jQuery. The code on the blog is shown like so:

// Create cookie
function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}

// Read cookie
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < 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;
}

// Erase cookie
function eraseCookie(name) {
    createCookie(name,"",-1);
}

Creating cookies like this:

createCookie("cookie-name", "cookie-value", 30);

Reading cookie like this:

readCookie("cookie-name");
// Usually you set it as a variable and then use it somewhere
var colorTheme = readCookie("color-theme");
// Then do some conditional crap with it
if (colorTheme == "Blue") {
    // Add a class to the body or elswere
} else {
    // Add a different class maybe...
}

回答4:

Best way to show/hide cookie in all the browser, including mobile browser also.

Demo: http://jsfiddle.net/a4fur7k3/1/

Notes : By default message should be hidden

HTML

    <div id="es_cookie_msg"  style="display:none;">
        <div class="es-cookie-msg-container">
                      <!-- Cookie Message -->
                        <span class="es-cookie-msg-text">We use cookies to help ensure our website meets your needs. By continuing to use this site you agree to our policy.
</span>   
            <!-- Close button -->
            <a id="es_cookie_close_btn" href="#" class="es-cookie-button">
                <svg class="es_cookie_close_icon" width="64" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">
                    <g>
                    <path fill="" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59   c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59   c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"></path>
                    </g>
                </svg>
            </a>
        </div>
    </div>

jQuery

jQuery( document ).ready(function() {
  jQuery('#es_cookie_close_btn').click(function() {
      jQuery('#es_cookie_msg').slideUp();
      // Set cookie
      cookieHelper.create('accepted', true);
  });
});

jQuery(function () {
  // If cookie hasnt reveioly been accepted, show banner
  if( !cookieHelper.read('accepted') ) {
      jQuery('#es_cookie_msg').slideDown();
  }
});

// Cookies set inside object
var cookieHelper = {
  // Cookies
  create: function (name, value, days) {
      if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          var expires = "; expires=" + date.toGMTString();
      }
      else var expires = "";

      document.cookie = name + "=" + value + expires + "; path=/";
  },

  read: function(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < 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;
  },

  erase: function(name) {
      createCookie(name, "", -1);
  }
}

来源：https://stackoverflow.com/questions/37087869/javascript-cookies-not-working-in-safari

标签

javascript

safari