Skip to content

Commit

Permalink
Test code for set()
Browse files Browse the repository at this point in the history
  • Loading branch information
hamishwillee committed Feb 27, 2025
1 parent fdb19c9 commit 29265bc
Showing 1 changed file with 107 additions and 0 deletions.
107 changes: 107 additions & 0 deletions files/en-us/web/api/cookiestore/set/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,113 @@ Even if the values are not displayed, they are still set.

{{EmbedLiveSample('Setting a cookie with options', 100, 250)}}

### Setting a cookie with options2

The following example sets a cookie by passing an `options` object with `name`, `value`, `expires`, and `partitioned`.

```html hidden
<button id="showCookies" type="button">Show cookie</button>
<button id="reset" type="button">Reset</button>
<pre id="log"></pre>
```

```css hidden
#log {
height: 180px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
```

```js hidden
const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
window.location.reload(true);
});

const logElement = document.querySelector("#log");

function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}

function clearLog() {
logElement.innerText = "";
}
```

```js hidden
function logCookie(name, cookie) {
if (cookie) {
log(`${name}:`);
for (const [key, value] of Object.entries(cookie)) {
log(` ${key}: ${value}`);
}
} else {
log(`${name}: Cookie not found`);
}
}
```

#### JavaScript

The code first waits for the cookie to be set: as this operation can fail, the operation is performed in a `try...catch` block and any errors are logged.
The example then gets the new cookie, if it exists, and logs its properties (note the logging and other display code is omitted).

```js
async function cookieTest() {
clearLog();

document.cookie = "test1=Hello; SameSite=None; Secure";
document.cookie = "test2=Hello2;";
const day = 24 * 60 * 60 * 1000;
const cookieName = "cookie2";
try {
// Set cookie: passing options
await cookieStore.set({
name: cookieName,
value: `${cookieName}-value`,
expires: Date.now() + day,
sameSite: "none",
});
} catch (error) {
log(`Error setting ${cookieName}: ${error}`);
console.log(error);
}

// Log the new cookie
const cookie = await cookieStore.get(cookieName);
logCookie(cookieName, cookie);

const cookie2 = await cookieStore.get("test1");
logCookie("test1", cookie2);

const cookie3 = await cookieStore.get("test2");
logCookie("test2", cookie3);
}
```

Note that some logging and other code is omitted for brevity.

```js hidden
const showCookies = document.querySelector("#showCookies");

showCookies.addEventListener("click", () => {
cookieTest();
});
```

#### Result

Press **Show cookie** to set the cookie and then display it.
Note that some browsers will only display the `name` and `value`, while others will display all the properties of the cookie.
Even if the values are not displayed, they are still set.

{{EmbedLiveSample('Setting a cookie with options2', 100, 250)}}

## Specifications

{{Specifications}}
Expand Down

0 comments on commit 29265bc

Please sign in to comment.