为什么我的JavaScript cookie只能在一个页面上运行?

时间:2016-04-14 20:21:47

标签: javascript cookies

我有一个JavaScript Cookie问题。我已经使用该示例从此站点编写和读取JavaScript cookie:http://www.tutorialspoint.com/javascript/javascript_cookies.htm。 cookie可以读取和写入同一页面,但是一旦我转到另一个页面,它应该使用类似的形式 - cookie中的信息就消失了。

我最初使用它来解决我的桌面问题,但是一旦我将它添加到我们正在测试的DEV网站上 - 它只适用于一个页面。基本上我可以在一个页面上用一个表单设置一个cookie,然后在另一个页面上就不会有cookie来读取。但是我可以在第二个表单上创建另一个cookie,它保存得很好。当我回到第一页表格时 - 我创建的第一个cookie填充了表单字段。

所以:

Form 1 page - cookie 1 created 
- then go to -
Form 2 page - cookie 1 doesn't exist but I can create cookie 2
- then go to -
Form 1 page - cookie 1 loads into form 1
- then go to -
Form 2 page - cookie 2 loads into form 2

有关该网站的其他信息:

Apache服务器 PHP 5.4 AngularJS 1.2.26 网络服务 其他JavaScript和jQuery文件 第三方脚本

关于我在调试时我在document.cookie中看到的唯一内容是一个phpsessid。这可能阻止我的cookie被带到另一页上的表单上吗?这些表单都在同一个域中,所以......

桌面版本与DEV网站相同:

第1页

<html>
   <head>

      <script src="tutorialspoint-cookies.js" type="text/javascript"></script>

   </head>

   <body>

        <h1>FORM 1</h1>
      <form name="form_000c" id="form_000c" action="">
        <label>First Name:</label>
        <input type="text" name="First_Name" id="First_Name" /><br />
        <label>Last Name:</label>
        <input type="text" name="Last_Name" id="Last_Name" /><br />
        <label>Email:</label>
        <input type="text" name="Email" id="Email" /><br />
        <label>Phone Number:</label>
        <input type="text" name="Phone" id="Phone" /><br />
        <label>Timeline:</label>
        <select name="Timeline" id="Timeline">
            <option value="time1">Timeline 1</option>
            <option value="time2">Timeline 2</option>
            <option value="time3">Timeline 3</option>
            <option value="time4">Timeline 4</option>
        </select><br />
        <label>Measurements:</label>
        <select name="Measurements" id="Measurements">
            <option value="meas1">Measurement 1</option>
            <option value="meas2">Measurement 2</option>
            <option value="meas3">Measurement 3</option>
            <option value="meas4">Measurement 4</option>
        </select><br />
        <input type="button" value="Set Cookie" onclick="WriteCookie();"/>
      </form>
      <a href="tutorialspoint-cookies-2.html">go to page 2</a>

   </body>
</html>

第2页

<html>
   <head>

      <script src="tutorialspoint-cookies.js" type="text/javascript"></script>

   </head>
   <body onLoad="ReadCookie()">

        <h1>FORM 2</h1>
      <form name="form_000c" id="form_000c" action="">
        <label>First Name:</label>
        <input type="text" name="First_Name" id="First_Name" /><br />
        <label>Last Name:</label>
        <input type="text" name="Last_Name" id="Last_Name" /><br />
        <label>Email:</label>
        <input type="text" name="Email" id="Email" /><br />
        <label>Phone Number:</label>
        <input type="text" name="Phone" id="Phone" /><br />
        <label>Timeline:</label>
        <select name="Timeline" id="Timeline">
            <option value="time1">Timeline 1</option>
            <option value="time2">Timeline 2</option>
            <option value="time3">Timeline 3</option>
            <option value="time4">Timeline 4</option>
        </select><br />
        <label>Measurements:</label>
        <select name="Measurements" id="Measurements">
            <option value="meas1">Measurement 1</option>
            <option value="meas2">Measurement 2</option>
            <option value="meas3">Measurement 3</option>
            <option value="meas4">Measurement 4</option>
        </select><br />
        <input type="button" value="Set Cookie" onclick="WriteCookie();"/>
      </form>
      <a href="tutorialspoint-cookies.html">go to page 1</a>

   </body>
</html>

JavaScript Cookie

 <!--http://www.tutorialspoint.com/javascript/javascript_cookies.htm
    function WriteCookie(){
       cookievalue1 = escape(document.form_000c.First_Name.value) + ";";
       cookievalue2 = escape(document.form_000c.Last_Name.value) + ";";
       cookievalue3 = escape(document.form_000c.Email.value) + ";";
       cookievalue4 = escape(document.form_000c.Phone.value) + ";";
       cookievalue5 = escape(document.form_000c.Timeline.value) + ";";
       cookievalue6 = escape(document.form_000c.Measurements.value) + ";";
       document.cookie = "First_Name=" + cookievalue1;
       document.cookie = "Last_Name=" + cookievalue2;
       document.cookie = "Email=" + cookievalue3;
       document.cookie = "Phone=" + cookievalue4;
       document.cookie = "Timeline=" + cookievalue5;
       document.cookie = "Measurements=" + cookievalue6;
       alert("Setting Cookies : " + "First_Name=" + cookievalue1 + "Last_Name=" + cookievalue2 + "Email=" + cookievalue3 + "Phone=" + cookievalue4 + "Timeline=" + cookievalue5 + "Measurements=" + cookievalue6 );
    }

    function ReadCookie(){
       var allcookies = document.cookie;

       // Get all the cookies pairs in an array
       cookiearray = allcookies.split(';');

       // Now take key value pair out of this array
       for(var i=0; i<cookiearray.length; i++){
          name = cookiearray[i].split('=')[0];

          // the cookie is leaving a white space in the name so we need to remove it with .trim()
          name = name.trim();
          value = cookiearray[i].split('=')[1];
          document.getElementById(name).value = value;
       }
    }

1 个答案:

答案 0 :(得分:0)

当您设置cookie时,请务必记住您还需要指定路径。

//在javascript中设置Cookie时使用路径= /

document.cookie = "First_Name=" + cookievalue1 + " path=/";
document.cookie = "Last_Name=" + cookievalue2 + " path=/";
document.cookie = "Email=" + cookievalue3 + " path=/";
document.cookie = "Phone=" + cookievalue4 + " path=/";
document.cookie = "Timeline=" + cookievalue5 + " path=/";
document.cookie = "Measurements=" + cookievalue6 + " path=/";