localStorage、sessionStorage、cookie

方法名	生命周期	存储大小
cookie	未设置日期，浏览器关闭之前生效	4kB
sessionStorage	浏览器关闭之前生效	5M
localStorage	永久生效	5M

1、定义

HTML5 web存储，一个比cookie更好的本地存储方式，可以用于客户端的本地存储。

2、客户端存储分类

客户端存储数据的两个对象为localStorage和sessionStorage、cookie.
- localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，除非手动清除。
- sessionStorage：用于临时保存同一窗口或tab标签页的数据，在关闭窗口或tab标签页之后，数据将会被删除。
- cookie：
    用于存储用户数据，设置cookie时，有的浏览器必须是访问服务器上的网页才可以设置；
    cookie本身具有实效性，在一定的时间间隔内会过期；
    过期方式：
        1>、在没有给cookie设置过期时间时，会立即过期；
        2>、在浏览器关闭的时候过期；

3、操作方法

localStorage.setItem(key, value)：保存数据
localStorage.getItem(key)：获取数据
localStorage.removeItem(key)：删除单个数据
localStorage.clear()：清除所有数据
localStorage.key(index)：获取某个索引的key

4、存储方式的区别

cookie、localStorage、sessionStorage这三种方式存储数据都保存在浏览器端，且是同源的。

  # 区别

（1）存储大小：
    web存储比cookie存储量更大，web存储的数据量为5M，而cookie的最大数据量只能达到4KB；
（2）安全性：
    cookie向后台发送http请求时会出现在http头部；
    cookie始终在同源的http请求中携带，即在浏览器和服务端之间来回传递；
    HTML5本地存储不会自动把数据发给服务器，仅在本地保存，节约了宽带，缩短了请求和响应的时间。
（3）生命周期：
    localStorage：保存的数据始终有效，即使窗口或者浏览器关闭之后，也会一直保存，永久有效，除非手动清除；
    sessionStorage：只有在浏览器关闭之前数据有效，关闭之后，数据会自动清除，生命周期较短；
    cookie：只在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭
（4）作用域：
    localStorage：在所有同源窗口中共享，在当前页面存储，可以在另一个页面中获取相关数据；
    sessionStorage：不可以在不同的浏览器窗口中共享，即使是同一个页面；
    cookie：在所有同源窗口中共享；
（5）事件通知：
    web storage支持事件通知机制，可以将数据更新的通知发给监听者

5、应用实践

  【cookie】

/* cookie的设置和获取 */
var cookie = document.cookie;// 获取cookie
document.cookie = "key1=value1;key2=value2";// 设置cookie

/*cookie只能保存有限的依稀数据，不安全，保存在客户端*/
document.cookie="name=zhangsan";
alert(document.cookie);

/*永久的保存在客户端，比较安全*/
localStorage.setItem("name","王晓朦");
alert(localStorage.getItem("name"));

/*与coookie类似，生存周期就是在浏览器打开的时候*/
sessionStorage.setItem("name","岚岚");
alert(sessionStorage.getItem("name"));

  【localStorage】

姓名：<input type="text" name="names" /><br />
密码：<input type="password" name="pwd" /><br />
记住用户信息：<input type="checkbox" name="check" id="check" />
<!--具体实现-->
<script>
    /*
     * 1、获取所有表单信息
     * 2、判断复选框的选中状态
     * 3、获取输入的用户名和密码，将复选框的值设置为true*/
    /*在将name表单的name值设置为name时，出现错误，在以后的实现过程中，注意name值的设置*/
    var names = document.getElementsByName("names")[0];
    var pwd = document.getElementsByName("pwd")[0];
    var check = document.getElementsByName("check")[0];
    
    if (localStorage.getItem("names") && localStorage.getItem("pwd")){
        names.value = localStorage.getItem("names");
        pwd.value = localStorage.getItem("pwd");
        alert(pwd.value);
        check.checked = true;
    }
    check.onclick = function () {
        if (check.checked){
            localStorage.setItem("names", names.value);
            localStorage.setItem("pwd", pwd.value);
        } else {
            localStorage.removeItem("names");
            localStorage.removeItem("pwd");
        }
    }
</script>

  【sessionStorage】

标题：<input type="text" name="title" />
内容：<textarea name="content"></textarea>
<input type="button" value="提交" name="submits"/>
<script>
    var title = document.getElementsByName("title")[0];
    var content = document.getElementsByName("content")[0];
    var submits = document.getElementsByName("submits")[0];

    if (sessionStorage.title || sessionStorage.content){
        title.value = sessionStorage.title;
        content.value = sessionStorage.content;
    }
    submits.onclick = function(){
        sessionStorage.title = title.value;
        sessionStorage.content = content.value;
    }
</script>