Cookie storage added as option

[b10z]

Table of Contents

• Description
• Motivation and Context
• How Has This Been Tested?
• Screenshots (if appropriate):
• Types of changes
• Checklist:

Description

Cookies added as a storage option. A new storeCookie.jsx was added that contains a funtion with get and set cookies functions. A new emitter flag (enableCookies) and its setter and getter were added to keep in track user preferences.

Motivation and Context

This feature was requested here #21 .

How Has This Been Tested?

Changes were tested in two projects. One vanilla React with almost nothing on it except google analytics, and in one bigger unreleased project with many different cookies. All of my tests were completed successfully, including "yarn test" as described.
Also, messing with the values from cookies and local storage while enabling and disabling cookies storage seems to work nice and smooth (All variations showed up as expected).

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

New emitter function "setCookie" needs to be mentions to the documentation as well. By setting emmiter.setCookie(true) the module uses cookies as storage. Default option is local storage.

Whatever you may need, please let me know.

[moretti]

Hey this looks great, thanks for submitting this PR!

Justing thinking: I'm looking at https://caniuse.com/?search=localstorage
and it seems that window.localStorage is supported by almost any modern browser (96.6% of the users at the moment).

So maybe rather than manually setting this option via emitter we could extend the existing store to fallback to cookies when localStorage is not supported.

For example something like:

import Cookies from 'js-cookie';

// https://github.com/Modernizr/Modernizr/blob/d4c7b6082709e32fb0589ba38aa96581d44ce395/feature-detects/storage/cookies.js#L16-L35
const cookiesEnabled = (() => {
  try {
    document.cookie = 'cookietest=1';
    const ret = document.cookie.indexOf('cookietest=') !== -1;
    document.cookie = 'cookietest=1; expires=Thu, 01-Jan-1970 00:00:01 GMT';
    return ret;
  } catch (e) {
    return false;
  }
})();

// https://github.com/Modernizr/Modernizr/blob/d4c7b6082709e32fb0589ba38aa96581d44ce395/feature-detects/storage/localstorage.js#L17-L46
const localStorageEnabled = (() => {
  const mod = 'modernizr';
  try {
    localStorage.setItem(mod, mod);
    localStorage.removeItem(mod);
    return true;
  } catch (e) {
    return false;
  }
})();

const store = {
    getItem(key) {
        if (localStorageEnabled) {
            return localStorage.getItem(key);
        }
        if (cookiesEnabled) {
            return Cookies.get(key);
        }
    }, 
    setItem(key, value) {
        if (localStorageEnabled) {
            return localStorage.setItem(key, value);
        }
        if (cookiesEnabled) {
            return Cookies.set(key, value);
        }
    }
};

export default store;

could replace the existing store and be more resilient? 🤔
This includes some snippets from Modernizr to perform feature detection and use js-cookie to read/write cookies. The library is only 800 bytes, so it should be fine to add it as dependency.
What do you think?

[b10z]

Hey,
Thanks for the comment! You are right, this might be the correct way of implementing the feature. Also, I believe that the code you provided is nicely written and elegant. Have you tested the code above with the tool? If you haven't, I have no problem of doing it and provide any changes needed!

[b10z]

Hey!
I added the provided code, reverted my previous commit and installed js-cookie as well. The code tested on both of my dummy react projects, everything worked as expected, even when i blocked local storage the code created a cookie as expected. For any change/fix/test/whatever please let me know.

[moretti]

Hey @b10z sorry for the late reply, unfortunately I didn't have much free time recently, but I'll have a look next week. Thanks again for contributing to the project!