Wecode day 5

Michael Minchang Kim·2020년 4월 24일
0

wecode

목록 보기
9/22

1. Class

JS classes are very similar to Java classes.

How to create a class

How to construct an instance of a class

const spaceship = new Car('우주선', 25000000);
const bus = new Car('버스',210000);
console.log(spaceship);
console.log(spaceship.name); 
console.log(spaceship.price); 
console.log(spaceship.applyDiscount(0.5)); 

Constructors are called when a new instance of a class is constructed.
Use dot to call methods and variables within the instance.

Developer tools

1. Applications

a. Manifest

This sections shows you the identity, presentation, and icons of the page.
Clicking on the link underneath Manifest will take you to the source of the manifest page.

2. Javascript Cookies

Cookies are pieces of data stored onto your pc.
Cookies were created so that information on the user is remembered.

"Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages. For example, one user registration ends after completing many pages. But how to maintain users' session information across all the web pages." 링크텍스트

"Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/remembers what was stored earlier."링크텍스트

  • When a user visits a web page , his name can be stored in a cookie.
  • Next time a user visits the page the cookie remembers the stored data

Cookies are stored in name value pairs

username = John Doe

Using js you can create, read, delete cookies through document.cookie.

How to create a cookie

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC;
path=/";

Expire date can be added, on default it is deleted when the browser is closed.
The path can also be set, on default it belongs to the current web page

Cookies are stored like a dictionary through a key value pair. So when a new cookie is created the old one does not disapear.

Set the expire date to delete a cookie, setting the path will make sure that you delete the right cookie. Some browsers don't let you delete cookies if you don't add a path

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

2. Local storage vs Session storage

"localStorage and sessionStorage accomplish the exact same thing and have the same API, but with sessionStorage the data is persisted only until the window or tab is closed, while with localStorage the data is persisted until the user manually clears the browser cache or until your web app clears the data. The examples in this post are for localStorage, but the same syntax works for sessionStorage."

a. Creating entries

let key = 'Item 1';
localStorage.setItem(key, 'Value');

b. Reading entries

let myItem = localStorage.getItem(key);

c. Updating entries

localStorage.setItem(key, 'New Value');

d. Deleting entries

localStorage.removeItem(key);

c. Clearing entries

localStorage.clear();

more in the following link 링크텍스트

profile
Soon to be the world's Best programmer ;)

0개의 댓글