Broswer
Cookie
브라우저에 저장되는 작은 크기의 문자열 데이터 저장 공간
document.cookie 속성
브라우저에 저장되어 있는 쿠키의 값
document.cookie = "user = green";쿠키의 값은 직접 지정할 수도 있다.
setCookie("이름", "값", "유지시간");
localStorage
브라우저를 다시 실행해도 저장되어 있는 데이터 저장 공간
(key 및 value 값은 문자열로 입력해야한다.)
localStorage.setItem(key,value) : 키, 값 형태로 보관된다.
localStorage.getItem(key) : 키에 해당하는 값에 접근한다.
localStorage.removeItem(key) : 키와 해당하는 값을 삭제한다.
localStorage.clear() : 모든 것을 삭제한다.
localStorage.length : 저장된 항목의 갯수
localStorage.setItem("test", 1);
console.log(localStorage.getItem("test"));
localStorage.setItem("green", "blue");
let obj1 = {
name: "green",
age: 30,
numArr: [1, 2, 3, 4, 5],
}
let newArr= [1, 2, 6, 4, 5]
// JSON 객체=> JSON.stringify(obj) = 객체를 문자로
// JSON 객체=> JSON.parse(string) = 문자를 객체로
localStorage.setItem("person", JSON.stringify(obj1))
localStorage.setItem("newArr", JSON.stringify(newArr))로컬 스토리지는 브라우저(도메인)별 로 저장된다.
window.addEventListener("storage", function(e){
})addEventListener 를 이용하면 storage 가 변경되면 실행되는 함수를 작성할 수 있다.
sessionStorage
브라우저 창을 닫는 순간 자동으로 삭제되는 데이터 저장 공간
- 사용자 정보 중 세션을 유지하는 동안에만 참조할 데이터를 저장한다.
- 화면 이동시 전달해야할 피라미터가 많은 경우 저장한다.
sessionStorage.setItem(key, value) : 세션 스토리지 생성
sessionStorage.getItem(key) : 키에 해당하는 값에 접근
sessionStorage.removeItem(key) : 키와 해당하는 값을 삭제
Browser Object Model
브라우저 객체 모델
navigator
사용자의 브라우저와 운영체제 정보를 제공하는 객체
navigator.appCodeName : 방문자의 브라우저 코드명을 반환
navigator.appName : 방문자의 브라우저 이름을 반환
navigator.appVersion : 방문자의 브라우저 버전 정보를 반환
navigator.language : 방문자의 브라우저 사용 언어를 반환
navigator.userAgent : 방문자의 브라우저와 운영체제 종합 정보를 반환
navigator.platform : 방문자의 브라우저를 실행하는 운영체제을 반환
navigator.product : 방문자의 브라우저 사용 엔진 이름 반환
history
사용자가 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메소드 제공
history.length : 방문한 사이트의 갯수 (방문 기록에 저장된 목록)
history.back() : 이전에 방문한 페이지로 이동
histroy.forward() : 다음 방문한 페이지로 이동
history.go(-n) : n단계 이전 페이지로 이동
location
브라우저 주소창에 url에 대한 정보와 새로고침 기능을 제공
location.href : 내가 보고 있는 페이지의 주소 값을 출력한다.
location.replace("도메인") : 지정한 도메인 사이트로 이동한다.
`location.replace("https://www.naver.com/")`
=> 지정한 `https://www.naver.com/사이트로 이동한다.도메인이 http://www.example.com:8080/search?q=devmo#example 일 때,
location.host : www.example.com:8080
location.hostname : www.example.com
location.pathname : /search
location.port : 8080
location.protocal : http:
location.search : ?q= devmo
location.hash : #example
location.reload() : 현재 페이지 새로고침
location.reload("url") : 새로운 주소로 이동
(location.assign(url) : 또한 새로운 주소로 이동된다.)
location = "url"로 현재 주소를 지정할 수도 있다.
XMLHttpRequest
-
서버와 상호작용하기 위한 내장객체
-
브라우저 환경에서만 동작한다.
