This content originally appeared on Bits and Pieces - Medium and was authored by Nipuni Arunodi
Recommended cookie libraries for your JavaScript application
Implementing a secure and robust cookie handling mechanism can be a challenging task. But, if you know the correct libraries, it becomes relatively straight ward.
In this article, I will discuss 6 JavaScript cookie libraries to help you choose the best one for your next project.
1. Js Cookie —Best for Vanilla JS
Js Cookie is a simple, lightweight JavaScript API for handling browser cookies.
It is an open-source library and comes with some exciting features to keep developers attracted.
Features of Js Cookie
- Supports AMD, CommonJS, and Es Modules.
- Universal browser support.
- Small package size (less than 800 bytes when gzipped).
- No dependencies.
- Follows RFC 6265 guidelines.
- The product has been thoroughly tested.
- Supports custom encoding and decoding.
Js Cookie has more than 2.7M weekly NPM downloads and 18.6K GitHub stars.
Installation
There are 3 methods to install Js Cookie. You can either install using NPM, directly use in the browser or use the CDN.
- Using NPM
npm i js-cookie
- Direct Download
<script type="module" src="/path/to/js.cookie.mjs"></script>
<script type="module">
import Cookies from '/path/to/js.cookie.mjs'
Cookies.set('foo', 'bar')
</script>
Usage of Js Cookie
As I mentioned, using Js Cookie is pretty simple. For example, you can create a cookie that expires within 3 days as follows:
Cookies.set('cookie-name', 'cookie-value', { expires: 14})If you need to read or delete a cookie, you can do it using set or remove methods.
// Reading a cookie
Cookies.get('cookie-name')// Deleting a cookie
Cookies.remove('cookie-name')2. React Cookie — Popular Library for React
React Cookie is a specialized cookie library for React that inherits features from the Universal Cookie library.
It provides a set of components and hooks to make the cookie handling in React pretty straightforward.
If you are using React 16.8+ version, you can use hooks to handle cookies. Otherwise, you have to use the cookie provider component.
Features of React Cookie
- React hook support.
- Application wide access to the Cookie with simple methods.
- Simple and easy to use configurations.
- Well maintained with frequent security vulnerability fixing.
React Cookie has more than 279K weekly NPM downloads and 2.1K GitHub stars.
Installation
You can easily install react-cookies using NPM or directly use it in the browser as follows:
- Using NPM
npm i react-cookie
- Use directly in the browser
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.production.js"
>
</script>
<script
crossorigin
src="https://unpkg.com/universal-cookie@3/umd/universalCookie.min.js"
>
</script>
<script
crossorigin
src="https://unpkg.com/react-cookie@3/umd/reactCookie.min.js"
>
</script>
Usage of React Cookie
React Cookie provides 3 hooks as cookies , setCookie and removeCookie. You can easily use these hooks to handle cookies in your React application.
const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);
// Setting a cookie value
setCookie(name, value, [options]);
// Removing a cookie
removeCookie(name, [options])
Note: Additionally you can include expiration date, maximum age, domain, and the security settings as options.
3. Cookies — Best for NodeJS Cookie Handling
Cookies is one of the popular NodeJS modules for HTTP cookie configuration.
You can easily integrate it with the built-in NodeJS HTTP library or use it as an Express middleware.
Features of Cookies
- Allows signing cookies using Keygrip to prevent tampering.
- Lazy cookie verification to reduce cost.
- Does not allow sending secure cookies over insecure sockets.
- By default, all cookies are HTTP only, and cookies sent over SSL are secure.
- Allows other libraries to access cookies without knowing the signing mechanism.
Cookies has more than 1.5M weekly NPM downloads and 1.1K GitHub stars.
Installation
You can easily install Cookies using NPM as follows:
npm install cookies
Usage of Cookies
Using Cookies is pretty straightforward. You just need to import the Cookies library and create a new cookie jar using the new Cookies( request, response, [ options ] ) command.
var cookie = require('cookie');
cookies = new Cookies( request, response, [ options ] )Then you can use that cookie jar to set and read cookies.
// Read cookies
cookies.get( name, [ options ] )
// Set cookies
cookies.set( name, [ value ], [ options ] )
4. Nookies — NextJS Cookie Handling
Nookies is a set of cookie helpers for NextJS projects.
It is the premium choice of the NextJS developers, and it comes with some unique features.
Features of Nookies
- Server-side support for setting, parsing, and destroying cookies.
- Supports custom Express servers.
- Ideal for verifying identities.
- Small package size (21.8 kB when unpacked)
Nookies has more than 111K weekly NPM downloads and 1.5K GitHub stars.
Installation
You can easily install cookies using NPM or Yarn as follows:
// Using NPM
npm install nookies
//Using Yarn
yarn add nookies
Usage of Nookies
Nookies library provides 3 different methods to manage client-side cookies named parseCookies, setCookie and destroyCookie.
import { parseCookies, setCookie, destroyCookie } from 'nookies';// Setting a cookie
setCookie(null, 'cookie-name', 'value', {
maxAge: 30 * 24 * 60 * 60,
path: '/',
});
// Deleting a cookie
destroyCookie(null, 'cookie-name');
//Parsing cookie
const cookies = parseCookies()
Similarly, If you want to handle cookies from the server-side, Nookies provide another 3 methods as set, get and destroy .
import nookies from 'nookies';
const cookies = nookies.get(params);
nookies.set(params, 'cookie-name', 'value', {
maxAge: 30 * 24 * 60 * 60,
path: '/',
})nookies.destroy(params, 'cookie-name')
5. NGX Cookie Service — Popular Library for Angular
NGX Cookie Service is one of the most used Angular-based cookie services.
It was originally based on the ng2-cookies library and now supports up to Angular 12.
Note: If you are using an Angular version below Angular 9.xx, you need to use 2.3.0 version of the library.
Read, set, and delete browser cookies with this Angular service. It was based on the ng2-cookies library at first.
Features
- Supports Angular IVY.
- It can be treated as any other Angular service.
NGX Cookie service has more than 273K weekly NPM downloads and 300+ GitHub stars.
Installation
NGX cookie service is available as NPM and Yarn packages. You can install it as follows:
// Using NPM
npm install ngx-cookie-service
// Using Yarn
yarn add ngx-cookie-service
Usage of NGX Cookie service
NGX cookie service can be treated as any other Angular service in your application. You just need to import it and include it as a provider in your module file.
import { CookieService } from 'ngx-cookie-service';
@NgModule({
...
providers:
[CookieService],
...
})
export class AppModule {
}Then you can inject the service into the component constructor and use it to create, read cookies.
constructor(
private cookieService: CookieService
)
{
this.cookieService.set('Test', 'Hello');
this.cookieValue = this.cookieService.get('Test');
}6. React Cookie Consent — Cookie Banners for React
React Cookie Consent is a small, simple and customizable cookie consent bar for use in React applications.
Although it is not a cookie-handing library, it allows you to easily create customized cookie consent bars for your React application.
Features of React Cookie Consent
- Easily customizable.
- Supports on scroll accept.
- Supports adding extra cookie options like domains.
- Provides overlays.
- Increasing the font-weight of the button to bold.
- Can use predefined CSS classes.
React Cookie Consent has more than 49K weekly NPM downloads and 356 GitHub stars.
Installation
You can use NPM or Yarn to install react-cookie-consent as follows:
// Using NPM
npm i react-cookie-consent
// Using Yarn
yarn add react-cookie-consent
Usage of React Cookie Consent
The React Cookie Consent library provides a component named CookieConsent to create cookie banners. You just need to import and wrap the banner text using it.
import CookieConsent from "react-cookie-consent";
<CookieConsent>This is a Cookie Banner.</CookieConsent>
In addition to that, CookieConsent component accepts a variety of props like acceptOnScroll, flipButtons, style, overlayStyle , etc, allowing you to customize the banner as needed.
Conclusion
In this article, I discussed 6 different JavaScript cookie libraries with unique features and framework support. You can find their popularity and usage on GitHub in the below chart.
I hope my suggestions will help you choose the best set of JavaScript cookie libraries for your project. And don’t forget to share your thoughts after working with these libraries.
Thank you for Reading !!!
Build better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →
Learn More
- Web Authentication: Cookies vs. Tokens
- Why Using Tokens and Cookies together is Better for Web Apps
- GitHub Removed Cookie Banners: Why Can't We?
5 Top JavaScript Cookie Libraries was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Nipuni Arunodi
Nipuni Arunodi | Sciencx (2021-10-19T15:36:07+00:00) 5 Top JavaScript Cookie Libraries. Retrieved from https://www.scien.cx/2021/10/19/5-top-javascript-cookie-libraries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.