Hey! Since a long time I have been developping some little snippets, plugins, tools … for the web. I’ve always been doing that alone and wanted to do some things with friends.

Today I’m proud to show you something I’ve made with Jean-Seb, a very good friend of mine.

In fact I have a lot of things in my head that I’d like to do. But I very often end up forgetting it. This time, my friend wanted to do something, and I just remembered something I began but never ended.

This is how Z-Cookies is born:

What is Z-Cookies?

Nowadays, a lot of websites are using cookies. They set, get or delete their cookies sometimes with an heavy jQuery plugin, or sometimes with some noobie home made scripts…

Here is our solution: A really lightweight vanilla JS Module to handle your cookies.

It is available via :

It is called Z-cookies, and here is how it works :

How does it work

This is a module design pattern. When added to your application, nothing more than calling its methodes is required

Get

With this method, you will be able to get the browser cookies data:

1
var myCookie = ZCookies.get("numberOne"); // myCookie = "foo"

Get multiple cookies

1
var myCookies = ZCookies.get("numberOne", "numberTwo"); //  myCookies = {"numberOne": "foo", "numberTwo" : "bar"}

Get all the cookies as an object

1
var myCookies = ZCookies.get(); // myCookies = {"numberOne": "foo", "numberTwo" : "bar"}

Set / Update

Here if the cookie already exists, it will be updated, otherwise it is created.

1
ZCookies.set("numberThree", "Hello, World!");

Expiration date

Instead of providing some ununderstandable timestamps, we chose an easyer solution : providing a simple object with the days, mins and/or hours set. You can also provide a number if you just need to set the expiration date in term of days.

It will be automatically converted so that the browser understands well what you meant.

1
2
3
4
ZCookies.set("numberFour", "Where is bryan?", {days: 1, hours: 12, mins: 30});
//Or you can just set the usefull values
ZCookies.set("numberFive", "Where is bryan?", {days: 1, mins: 30});
ZCookies.set("numberSix", "Where is bryan?", 2);

Delete

1
ZCookies.delete("numberThree"); // now numberThree cookie does not exist anymore.

BONUS

You can chain ZCookies set and delete methodes.

The get method can be added at the end of the chain, it is meant to return a value.

1
ZCookies.set("Chaining", "Is").set("A", "realy").set("Awesome", "Feature").delete("A").get(); // {"Chaining": "Is", "Awesome": "Feature"}

Development

dev server (facultative)

There is a simple configuration file that is meant to be used with lite-server

1
npm i

With this server, you’ll be able to watch changes on the files and refresh your browser automatically. If you open the given url on multiple devices, it will be synchronised too.

To start the server, simply type

1
npm run dev

Warning! The minified version of the js is not generated automatically, you’ll have to use some other tools to do that…

License

MIT

This is an Open-Source project created by ZeZen & Pacejz. It is meant to evolve but is fully usable as-is today.

You can contribute, fork, issue on github and please comment below!

See you next hack ;-)

Article suivant

Vue-Wording
Article précédent

Z-Router