Wednesday, April 14, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Learn to Code

cookieStore: Async Cookie API

October 20, 2020
in Learn to Code
How to Change the WordPress Admin Login Logo
587
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

One pattern in the JavaScript API world that web development veterans will notice is that we’ve been creating new methods to accomplish what older, grosser APIs once achieved. XMLHttpRequest became the fetch API, some APIs like Battery became async, and there are dozens of other examples. Another API desperately in need of updating is the cookie API…and we’ve finally go it: cookieStore.

The new cookie API, cookieStore, is asynchronous and provides a logical method for cookie management. You have to remember that the previous method of getting and setting cookies completely revolved around concatenating and parsing document.cookie as a string. Don’t believe me? Check out this monstrosity!

You might also like

Five Top Quality APIs

Intl.NumberFormat

Detect CSS Overflow Elements

document.cookie =
  '__Secure-COOKIENAME=cookie-value' +
  '; Path=/' +
  '; expires=Fri, 12 Aug 2016 23:05:17 GMT' +
  '; Secure' +
  '; Domain=example.org';
// now we could assume the write succeeded, but since
// failure is silent it is difficult to tell, so we
// read to see whether the write succeeded
var successRegExp =
  /(^|; ?)__Secure-COOKIENAME=cookie-value(;|$)/;
if (String(document.cookie).match(successRegExp)) {
  console.log('It worked!');
} else {
  console.error('It did not work, and we do not know why');
}

Let’s focus on using this new API, cookieStore, to bring sanity to cookies!

If you really want to see how cookies are presented to you now, go to your favorite website and type document.cookie . The horror!

Set a Cookie

cookieStore.set allows you to set a cookie with name, value, and other specifics:

// All cookieStore methods are sync, so you can `await` or `then`/`catch`
await cookieStore.set({ 
  name: "dw-test", 
  value: 1, 
  domain: 'davidwalsh.name', 
  // Very far in the future!
  expires: Date.now() + Date.now() 
});

// Quick, naive set
await cookieStore.set('key', 'value');

This is so much better than concatenating an odd string onto and already odd document.cookie!

Get a Cookie

cookieStore.get provides a method for getting the value of a specific cookie:

const testCookie = await cookieStore.get('dw-test');

{
  domain: "davidwalsh.name",
  expires: 3206289322149,
  name: "dw-test",
  path: "/",
  sameSite: "strict",
  secure: true,
  value: "1",
}

If the cookie exists and hasn’t expired, the value and much more about the cookie will be returned. Yes — a simple get method instead of parsing a string! Tears in my eyes!

Delete a Cookie

We can use cookieStore.delete to remove a cookie:

await cookieStore.delete('dw-test');

Just as simple as you’d expect!

Cookie Change Event

If you’d like to know when cookies are being created, deleted, or modified, you can listen for the change event on the cookieStore:

cookieStore.addEventListener('change', event => {
  console.log(`${event.changed.length} changed cookies`);
  for (const cookie in event.changed)
    console.log(`Cookie ${cookie.name} changed to ${cookie.value}`);

  console.log(`${event.deleted.length} deleted cookies`);
  for (const cookie in event.deleted)
    console.log(`Cookie ${cookie.name} deleted`);
});

I’m so happy that the old document.cookie is essentially getting replaced with this awesome but simple cookieStore API. Onward and upward with JavaScript APIs! Which legacy API would you like to see improved next?

Website performance monitoring
Credit: DavidWalsh By: David Walsh

Previous Post

Ransomware gang donates part of ransom demands to charity organizations

Next Post

Predicting The Next Event « Machine Learning Times

Related Posts

Five Top Quality APIs
Learn to Code

Five Top Quality APIs

April 14, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Intl.NumberFormat

April 13, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Detect CSS Overflow Elements

April 8, 2021
How to Mine Ethereum
Learn to Code

How to Mine Ethereum

March 26, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

VS Code node:console Fix

March 24, 2021
Next Post
The ML Times Is Growing – A Letter from the New Editor in Chief – Machine Learning Times

Predicting The Next Event « Machine Learning Times

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

Four Tips for Better Videos Ads on LinkedIn [Infographic]
Marketing Technology

Four Tips for Better Videos Ads on LinkedIn [Infographic]

April 14, 2021
‘FLoC off!’ Vivaldi declares as it says no to Google’s tracking system
Internet Security

‘FLoC off!’ Vivaldi declares as it says no to Google’s tracking system

April 14, 2021
Applying artificial intelligence to science education — ScienceDaily
Machine Learning

Machine learning can help slow down future pandemics — ScienceDaily

April 14, 2021
B2B Marketers’ vs. Visitors’ Top Website Features
Marketing Technology

B2B Marketers’ vs. Visitors’ Top Website Features

April 14, 2021
Microsoft April patch download covers 114 CVEs including new Exchange Server bugs
Internet Security

Microsoft April patch download covers 114 CVEs including new Exchange Server bugs

April 14, 2021
RCE Exploit Released for Unpatched Chrome, Opera, and Brave Browsers
Internet Privacy

RCE Exploit Released for Unpatched Chrome, Opera, and Brave Browsers

April 14, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • Four Tips for Better Videos Ads on LinkedIn [Infographic] April 14, 2021
  • ‘FLoC off!’ Vivaldi declares as it says no to Google’s tracking system April 14, 2021
  • Machine learning can help slow down future pandemics — ScienceDaily April 14, 2021
  • B2B Marketers’ vs. Visitors’ Top Website Features April 14, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates