Tag: Javascript

The code

Until now, things have worked as desired and I hope that new eyes will be able to report any error or item that can be improved, a live demo is hosted and updated on GitHub Pages , and the source code is only one file. fork or clone a way….

BrowserStorage.js

BrowserStorage class {
/ **
* @this BrowserStorage
* /
constructor () {
this.supports_local_storage = this.supportsLocalStorage ();
this.supports_cookies = this.supportsCookies ();
this.storage_available = (this.supports_cookies || this.supports_local_storage)? right wrong;
}

/ **
* Note, use `this.supports_local_storage` instead in the tests.
* @returns {boolean}
* /
supportsLocalStorage () {
try {
let key = & # 39; test & # 39;
let value = true;
localStorage.setItem (key, value);
localStorage.getItem (key);
localStorage.removeItem (key);
} catch (e) {
returns false;
}
return true;
}

/ **
* Note, use `this.supports_cookies` instead in the tests.
* @returns {boolean}
* /
supportsCookies () {
if (navigator.cookieEnabled) returns true;

try {
document.cookie = & # 39; testcookie & # 39 ;;
} catch (e) {
returns false;
} finally {
if (document.cookie.indexOf (& # 39; testcookie & # 39;)! = -1) {
this.remove (& # 39; testcookie & # 39;);
return true;
}
returns false;
}
}

/ **
* Copy of the `constructor` method which should not come from a type error
* /
constructorRefresh () {
this.supports_local_storage = this.supportsLocalStorage ();
this.supports_cookies = this.supportsCookies ();
this.storage_available = (this.supports_cookies || this.supports_local_storage)? right wrong;
}

/ **
* Gets the specified value of browser storage and URI components when returning
* @returns {? boolean |? number |? string}
* @this BrowserStorage
* /
Get the key) {
let value = null;
if (this.supports_local_storage) {
value = localStorage.getItem (key);
} else if (this.supports_cookies) {
leave cookie_data = document.cookie.match (& # 39; (^ |;)? + key + & # 39; = ([^;]*) (; | $) & # 39;)
value = cookie_data? cookie_data[2] : no;
}
returns encodeURIComponent (value);
}

/ **
* Removes the value selected by key from the browser storage; note for cookies, _full whipe_ will be displayed when loading the next page
* @returns {boolean}
* @this BrowserStorage
* /
remove (key) {
if (this.supports_local_storage) {
localStorage.removeItem (key)
return true;
} else if (this.supports_cookies) {
// Note, how to disable and expire in the past
// to delete a cookie the next time the page loads.
this.set (key, -7);
return true;
}
returns false;
}

/ **
* Stores the client settings in the browser, _serverless_ in the real sense
* key @peram {string | number} - _name variable_to store the value under
* value @peram {boolean | number | string} - stored under localStorage or as a cookie
* @peram {number} days_to_live - how long is a browser suggested to keep cookies
* @returns {boolean}
* @this BrowserStorage
* /
set (key, value, days_to_live = false) {
if (this.supports_local_storage) {
localStorage.setItem (key, value);
return true;
} else if (this.supports_cookies) {
let expire = & # 39 ;;

if (days_to_live) {
let date = new Date ();
if (days_to_live == 0) {
date.setTime (date.getTime ());
} other {
date.setTime (date.getTime () + (days_to_live * 24 * 60 * 60 * 1000));
}
expires = & # 39 ;; expires = + date.toGMTString ();
}

document.cookie = name + & # 39; = & # 39; + value + expires + & # 39 ;; path = / & # 39 ;;
return true;
}
returns false;
}

/ **
* Clear ** all ** LocalStorage client or cookie settings
* @returns {boolean}
* @this BrowserStorage
* /
clear () {
if (this.supports_local_storage) {
localStorage.clear ();
return true;
} else if (this.supports_cookies) {
leave the cookies = document.cookie.split (& # 39 ;;);
for (ie i = 0; i <cookies.length; i ++) {
leave cookie = cookies[i];
let key = encodeURIComponent (cookie.split (& # 39; = & # 39;)[0].replace (/ (^  s + |  s + $) / g, & # 39;));
if (typeof (key) == <string> || typeof (key) == # number;) {
this.remove (key);
} other {
returns false;
}
}
return true;
}
returns false;
}

}

main.css

/ **
* 1. Central element
* 2. Re-justify the text
* /
body {
text-align: center; / * 1 * /
}

.container__main_content {
maximum width: 80%;
maximum width: 80vw;
display: inline-block; / * 1 * /
text-align: left; / * 2 * /
}

/ **
* Note on confidentiality
* /
.container__privacy_notice {
position: fixed;
bottom: 5px;
maximum width: 80%;
maximum width: 80vw;
background color: light gray;
text-align: left; / * 2 * /
}

.privacy_notice__label {
background color: black;
White color;
font size: 1.5rem;
upholstery: 5px 10px;
Float on the right;
}

.privacy_notice__label: hover {
color: light gray;
}

/ * Status of the label when the check box is unchecked * /
.privacy_notice__label :: after {
content: attr (value);
}


/ **
* Tweaks
* /
.hidden__input {
display: none;
visibility: hidden;
opacity: 0;
filter: alpha (opacity = 0);
}


/ * Status updates when the check box is checked * /
.privacy_notice__checkbox: verified ~ .container__privacy_notice {
box-shadow: not defined;
max-width: 1.5rem;
maximum height: 1.5rem;
}

.privacy_notice__checkbox: checked ~ .container__privacy_notice * {
visibility: hidden;
opacity: 0;
filter: alpha (opacity = 0);
}

.privacy_notice__checkbox: verified ~ .container__privacy_notice .privacy_notice__label :: after {
content: attr (verified);
}

/ * Status of the label when the checkbox is checked * /
.privacy_notice__checkbox: verified ~ .container__privacy_notice :: after {
content: & # 39;  1F56D & # 39;
position: absolute;
bottom: 5px;
left: 5px;
}

/ * List of verified and hovering updates * /
.privacy_notice__checkbox: verified ~ .container__privacy_notice: hover {
maximum width: 80%;
maximum width: 80vw;
maximum height: not defined;
}

.privacy_notice__checkbox: checked ~ .container__privacy_notice: hover * {
visibility: visible;
opacity: 1;
filter: alpha (opacity = 100);
}

index.html

  
    
    
    

    
    

    
  

  
    

      

        
        
        
        It is a static site that gives the illusion of remembering a customer.
Test by accepting privacy notice then refreshing or
close and reopen a tab pointing to the current URL.
      

      

        Ctrl R or Ctrl shift R
        will refresh most desktop browsers.
      

      

        
        
        
        Then reject the privacy statement by clicking the Acceptable button
again to reverse the behavior of this site.
      

      

        
        
        
        use Ctrl shift I open the debugger on a
desktop browser, and then go to the tab / pane Storage to observe
JavaScript does things for the actions mentioned above.
      
    

    
    

      

        
        
        
        This site uses JavaScript, and local storage or cookies from your browser,
to improve your experience here, however, this site is currently doing
        do not store data about your server-side activity.
      

      

        
        
        
        Review the Privacy
        and security
        notice concerning the
        
          BrowserStorage.js
        , for more details on using storage and client-side scripts.
      
      Acceptable: 
    
  

Note, I have tried using the Web Code option when writing this question, but this has caused various errors.

Questions

My goal is to have 100% coverage for browsers using JavaScript and local storage or document.cookie storage options;

• in this day n age is it useful to use cookies for local backup storage?

• is it useful to use the old syntax to get the OO behavior of JavaScript or use the class and a function keywords are enough?

if there are good arguments for not using class, please include feature detection examples to load another version.

• I keep running through nper but it seems to be more focused on node-related JavaScript, should I consider issuing npm init. or would it be pollute their parcel management system?

If such projects are a good candidate for nper, then some tips on agnostic publishing methods of the operating systems Git the orders would be excellent.

• I am currently using encodeURIComponent when returning values ​​stored in the browser, however, this leads to unpredictable behavior with Boolean and numeric values ​​(sometimes a string, sometimes not), better way to recover values?

At this point, it seems almost necessary to do a pre-check before returning to get some consistency in behavior.

• Where did I go wrong and / or how can I improve code execution without sacrificing readability?

• One thing I find annoying to use checkbox hacks is accessibility, are there any well ways to get Tongue and Space/Enter support?

Thank you, and I hope that even though the above is me being a bad influence that we can all learn why together.