자바스크립트 로컬 저장소 요약

1. 다양한 스토리지 솔루션의 간단한 비교

쿠키: 모든 브라우저에서 지원, 용량 4KB

UserData: IE에서만 지원, 용량 64KB

Flash: 100KB, 비 HTML 네이티브, 플러그인 지원 필요

Google Gears SQLite: 플러그인 지원 필요, 무제한 용량

LocalStorage: HTML5, 용량은 5M

SesstionStorage: HTML5, 용량은 5M

globalStorage: Firefox에 고유하며 이 방법은 Firefox13부터 더 이상 지원되지 않습니다.

UserData는 IE에서만 지원되며 Google Gears SQLite는 필요합니다. 플러그인이며 Flash는 HTML5의 출현으로 점차 사라졌습니다. 역사의 무대에서 오늘날 우리의 주인공은 Cookie, LocalStorge, SesstionStorge;

Cookie

프런트 엔드로서 쿠키를 처리해야 하는 횟수는 결코 적지 않을 것입니다. 쿠키는 상대적으로 오래된 기술입니다. 1993년 Netscape 직원 Lou Montulli는 더 발전하기 위해 오늘날 널리 사용되는 쿠키를 발명했습니다. 사용자가 웹사이트를 방문할 때 액세스 속도를 향상시키고 네트워크를 더욱 개인화합니다.

2.1 쿠키의 특성

먼저 쿠키의 특성을 살펴보겠습니다.

1) 쿠키의 크기는 4KB로 제한됩니다. 파일이나 이메일과 같은 대용량 쿠키는 허용되지 않습니다.

2) 쿠키와 관련된 요청이 있는 한, 쿠키는 서버와 브라우저 사이를 오가며 전송됩니다(로컬 파일이 쿠키를 테스트할 수 없는 이유가 설명됩니다). 또한 쿠키 데이터는 항상 동일한 출처의 http 요청에 포함되어(필요하지 않더라도) 쿠키가 너무 클 수 없는 중요한 이유이기도 합니다. 정통 쿠키 배포는 HTTP 프로토콜을 확장하여 수행됩니다. 서버는 지침에 따라 해당 쿠키를 생성하도록 브라우저에 메시지를 표시하는 특수 지침 줄을 HTTP 응답 헤더에 추가합니다.

3) 사용자가 서버 데이터를 요청할 때마다 이러한 요청과 함께 쿠키가 서버로 전송됩니다. PHP와 같은 서버 스크립트 언어는 쿠키가 보낸 데이터를 처리할 수 있다고 할 수 있습니다. 매우 편리합니다. 물론 프론트엔드에서도 쿠키를 생성할 수 있습니다. js를 사용하여 쿠키를 조작하는 것은 꽤 번거로운 작업입니다. 브라우저는 document.cookie와 같은 객체만 제공하며 쿠키를 할당하고 얻는 것은 번거롭습니다. PHP에서는 setcookie()를 통해 쿠키를 설정하고 슈퍼 전역 배열인 $_COOKIE를 통해 쿠키를 얻을 수 있습니다.

쿠키의 내용에는 주로 이름, 값, 만료 시간, 경로 및 도메인이 포함됩니다. 경로와 도메인이 함께 쿠키의 범위를 구성합니다. 만료 시간이 설정되지 않으면 이 쿠키의 수명은 브라우저 세션 동안이라는 의미이며, 브라우저 창이 닫히면 쿠키가 사라집니다. 브라우저 세션 동안 지속되는 이러한 유형의 쿠키를 세션 쿠키라고 합니다. 세션 쿠키는 일반적으로 하드 디스크에 저장되지 않고 메모리에 저장됩니다. 물론 이 동작은 사양에 의해 지정되지 않습니다. 만료 시간이 설정되면 브라우저는 쿠키를 하드 디스크에 저장합니다. 브라우저를 닫았다가 다시 열면 해당 쿠키는 설정된 만료 시간이 초과될 때까지 계속 유효합니다. 하드 드라이브에 저장된 쿠키는 두 개의 IE 창과 같은 서로 다른 브라우저 프로세스 간에 공유될 수 있습니다. 브라우저마다 메모리에 저장된 쿠키를 처리하는 방법이 다릅니다.

2.2 세션

쿠키 하면 세션을 빼놓을 수 없습니다.

세션 메커니즘. 세션 메커니즘은 서버측 메커니즘으로, 서버는 정보를 저장하기 위해 해시 테이블과 유사한 구조를 사용합니다(또는 해시 테이블을 사용할 수도 있음). 프로그램이 클라이언트의 요청에 대한 세션을 생성해야 하는 경우, 서버는 먼저 클라이언트의 요청에 이미 세션 식별자(세션 ID라고 함)가 포함되어 있는지 확인합니다. 만약 그렇다면 이는 이전에 이 클라이언트에 대한 세션이 생성되었음을 의미합니다. 서버는 세션 ID에 따라 세션을 검색하여 사용합니다(검색할 수 없는 경우 새 세션을 생성합니다). 클라이언트 요청에 세션 ID가 포함되어 있지 않으면 클라이언트에 대한 세션이 생성되고 이 세션과 연결된 세션 ID가 생성됩니다. 세션 ID 값은 반복되지도 않고 모방할 패턴을 찾기도 쉽지 않은 문자열이어야 합니다. 이 세션 ID는 저장을 위해 이 응답으로 클라이언트에 반환됩니다. 이 세션 ID를 저장하는 방법은 쿠키를 사용하여 상호 작용 프로세스 중에 브라우저가 규칙에 따라 이 ID를 서버에 자동으로 보낼 수 있도록 하는 것입니다. 일반적으로 이 쿠키의 이름은 SEEESIONID와 유사합니다. 그러나 쿠키는 인위적으로 비활성화될 수 있으며 쿠키가 비활성화된 경우 세션 ID를 서버에 다시 전달하는 다른 메커니즘이 있어야 합니다. 자주 사용되는 기술은 URL 재작성이라고 하며, URL 경로 끝에 세션 ID를 직접 추가합니다. 예: http://damonare.cn?sessionid=123456 form Hidden Field라는 기술도 있습니다. 즉, 서버는 자동으로 양식을 수정하고 양식이 제출될 때 세션 ID가 서버로 다시 전달될 수 있도록 숨겨진 필드를 추가합니다. 예를 들면 다음과 같습니다.

<form name="testform" action="/xxx">
    <input type="hidden" name="sessionid" value="123456">
    <input type="text">
</form>

실제로 이 기술은 액션에 URL 재작성을 적용하여 간단히 대체할 수 있습니다.

2.3 Cookie和Session简单对比

Cookie和Session 的区别：

1）cookie数据存放在客户的浏览器上，session数据放在服务器上。

2）cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。

3）session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。

4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5）所以建议：

将登陆信息等重要信息存放为SESSION

其他信息如果需要保留，可以放在cookie中

2.4 document.cookie的属性

expires属性

指定了coolie的生存期，默认情况下coolie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户推出浏览器后这些值也会丢失，如果想让cookie存在一段时间，就要为expires属性设置为未来的一个过期日期。现在已经被max-age属性所取代，max-age用秒来设置cookie的生存期。

path属性

它指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。

domain属性

domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。例如让位于order.damonare.cn的服务器能够读取catalog.damonare.cn设置的cookie值。如果catalog.damonare.cn的页面创建的cookie把自己的path属性设置为“/”，把domain属性设置成“.damonare.cn”，那么所有位于catalog.damonare.cn的网页和所有位于orlders.damonare.cn的网页，以及位于damonare.cn域的其他服务器上的网页都可以访问这个cookie。

secure属性

它是一个布尔值，指定在网络上如何传输cookie，默认是不安全的，通过一个普通的http连接传输

2.5 cookie实战

这里我们使用javascript来写一段cookie,借用w3cschool的demo:

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return "";
}

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toUTCString())
}
function checkCookie(){
    username=getCookie('username')
    if(username!=null && username!=""){alert('Welcome again '+username+'!')}
    else{
        username=prompt('Please enter your name:',"")
        if (username!=null && username!=""){
            setCookie('username',username,355)
        }
    }
}

注意这里对Cookie的生存期进行了定义，也就是355天

3. localStorage

这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。

它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。

3.1 localStorage的属性方法

下表是localStorge的一些属性和方法

3.2 localStorage的缺点

① localStorage大小限制在500万字符左右，各个浏览器不一致

② localStorage在隐私模式下不可读取

③ localStorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）

④ localStorage不能被爬虫爬取，不要用它完全取代URL传参

4. sessionStorage

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。使用方法（和localStorage完全相同）：

5. sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。

5.1 测试

sessionStorage:

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
      sessionStorage.pagecount=1;
}
console.log("Visits "+ sessionStorage.pagecount + " time(s).");

测试过程：我们在控制台输入上述代码查看打印结果

控制台首次输入代码：

关闭窗口，控制台再次输入代码：

所谓的关闭窗口即销毁，就是这样，关闭窗口重新打开输入代码输出结果还是上面图片的样子，也就是说关闭窗口后sessionStorage.pagecount即被销毁，除非重心创建。或者从历史记录进入才会相关数据才会存在。好的，我们再来看下localStorge表现：

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
 }
console.log("Visits "+ localStorage.pagecount + " time(s).");

控制台首次输入代码：

关闭窗口，控制台再次输入代码：

6. web Storage和cookie的区别

Web Storage(localStorage和sessionStorage)的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生