JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<input type="input" id="name" /><input type="input" id="value" /><input type="button" id="save" value="save" />

JavaScript

function parseCookies (string) {
	var cookies = {};
	
	string.split('; ').forEach(function (cookie) {
		var parts = cookie.split('=');
		cookies[parts[0]] = parts[1];
	});
	return cookies;
}

function setCookie(name, value, days) {
	var exdate = new Date();
	exdate.setDate(exdate.getDate() + days);
	document.cookie = name + "=" + escape(value) + ((days==null) ? "" : "; expires="+exdate.toUTCString());
}

(function checkCookies () {
	if (document._cookie === undefined) {
		document._cookie = document.cookie;
		document.cookieObject = parseCookies(document.cookie);
	} else if (document.cookie != document._cookie) {
		var cookie,
			cookies = parseCookies(document.cookie),
			changed = [];

		for (cookie in cookies) {
			if (cookies[cookie] !== document.cookieObject[cookie] && changed.indexOf(cookie) === -1) {
				changed.push(cookie);
			}
		}

		for (cookie in document.cookieObject) {
			if (document.cookieObject[cookie] !== cookies[cookie] && changed.indexOf(cookie) === -1) {
				changed.push(cookie);
			}
		}

		changed.forEach(function (cookie) {
			console.log('cookie-changed', cookie, cookies[cookie]);
		});

		document._cookie = document.cookie;
		document.cookieObject = cookies;
	}

	setTimeout(checkCookies, 100);
})();

document.getElementById('save').addEventListener('click', function () {
    setCookie(document.getElementById('name').value, document.getElementById('value').value);
});