web Storage

        localStorage -用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

案例： 关闭浏览器后重新点击，原本的存储信息不会消失，再次点击从上次点击次数开始

<input type="button" name="" value="点击" onclick="j()">
    <div id="result2"></div>
    <script type="text/javascript">
        function j() {
            if (localStorage.click_j) {
                localStorage.click_j = parseInt(localStorage.click_j) + 1;
            } else {
                localStorage.click_j = 1;
            }
            document.getElementById("result2").innerHTML = "点击次数" + localStorage.click_j;
        }
    </script>

效果图

   sessionStorage -用于临时保存间一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

案例： 关闭浏览器后重新点击，原本的存储信息消失，再次点击从0开始

<input type="button" name="" value="点击" onclick="i()">
    <div id="result"></div>
    <script type="text/javascript">
        function i() {
            if (sessionStorage.click_i) {
                sessionStorage.click_i = parseInt(sessionStorage.click_i) + 1;
            } else {
                sessionStorage.click_i = 1;
            }
            document.getElementById("result").innerHTML = "点击次数" + sessionStorage.click_i;
        }
    </script>

 

web Storage的特点:

        设置数据和读取数据比较方便

        容量较大，sessionStorage约5M，localStorage约20M

        只能存储字符串，如果要存储JSON对象，可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。

cookies，sessionStorage 和 localStorage 的区别

        (1) sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问 并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅 仅是会话
级别的存储。
        (2) localStorage 用于持久化的本地存储，除非主动删除数据，否则 数据是永远不会过期的。
web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似，区别是它是为了更
大容量存储设计的。
        (3) Cookie 的大小 是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费 了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。 除此之外，Web
Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自
己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务
器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为 了在本地“存
储”数据而生。

掌握localStorage使用

        localStorage对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

        不管是localStorage，还是sessionStorage，可使用的API都相同，Storage接口中提供了一些方法和属性，如下表所示:

方法&属性	描述
setltem(key,value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值
getltem(key)	该方法接收一个键名作为参数，返回键名对应的值
romoveltem(key)	该方法接收一个键名作为参数，并把该键名从存储中删除
length	类似数组的length属性，用于访问Storage对象中item的数量。
key(n)	用于访问第n个key的名称
clear()	清除当前域下的所有localSotrage内容