本地存储

Posted 2020-07-31 儿一愿，娘一生

web在数据在本地存储有以下三种：

1.cookie；

2.Web Storage，来自html5；

3.IE的userData，不建议使用。

1 cookie

原理

用户浏览器第一次向服务器请求（Request）时，服务器会放回Set-Cookie：XXX；

浏览器会记下XXX，当浏览器再次请求服务器时，就会带上Cookie：XXX。

注意事项

1.根据域名判别；

2.cookie名称不区分大小写。

3.其值是一个字符串，多个值使用“;”分隔。

限制

数量限制（可使用“子cookie技术”解决该问题）：

1.IE6及更低版本每个域最多20个cookie；

2.IE7及更高版本每个域最多50个cookie；

3.Firefox每个域最多50个cookie；

4.Opera每个域最多30个cookie；

5.Webkit内核（Safari & Chrome）没有对cookie数量做明确限制，但是如果cookie太大以至于超过了HTTP头部的大小限制时，服务器将无法正确处理。

尺寸限制：大多数浏览器都将cookie的尺寸限制在4096B左右。

基本操作

1.在浏览器上通过document.cookie属性的存取来操作cookie。

2.在谷歌浏览器的控制台中输入document.cookie后回车，可以看到此页面下可用的完整cookie内容。

3.document.cookie并不仅仅是一个普通的字符串，其有一个奇怪的特性——赋值时，不会覆盖原有的cookie，而是将新的cookie添加到后面（key重复时除外）。

document.cookie="uid=123"  //设置一个值

简化cookie操作

由于document.cookie只能获取到完整的字符串，为了方便操作cookie，一般封装两个函数——getCookie、setCookie。

//获取cookie
        function getCookie(name) {
            var cookieName = encodeURIComponent(name) + "=",
                    cookieStart = document.cookie.indexOf(cookieName),
                    cookieValue = null,
                    cookieEnd;
            if (cookieStart > -1) {
                cookieEnd = document.cookie.indexOf(";", cookieStart);
                if (cookieEnd == -1) {
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
            }
            return cookieValue;
        }
        //设置cookie
        function setCookie(name, value, opt_expiress, opt_path, opt_domain, opt_secure) {
            var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
            if(opt_expiress instanceof Date){
                //cookie的过期时间只支持GMT格式
                cookieText += ";expires=" + opt_expiress.toGMTString();
            }
            if(opt_path){
                //path表示cookie起作用的路径，比如/path1 下设置的cookie，path2的页面则无法访问
                cookieText += ";path=" + opt_path;
            }
            if(opt_domain){
                //只能设置子域，而不能跨域
                cookieText += ";domain=" + opt_domain;
            }
            if(opt_secure){
                //安全标志，指定该标志后只有在 使用SSL连接时才会发送 cookie（即发送到https://开头的域）
                cookieText += ";secure";
            }
            document.cookie = cookieText;
        }

如果要删除一个cookie，只需要将key的值设置为空字符串，并将它的过期时间设置为过去的时间即可。

//删除cookie
        function unsetCookie(name,path,domain,secure) {
            setCookie(name, "",new Date(0),path,domain,secure);e
        }

Web Storage

    Web Storage的使用非常方便，速度更快，也更安全，只会存储在浏览器中而不会随HTTP请求发送到服务器。它可以轻松的存储大量数据而丝毫不会影响网站的性能。PS：Storage和Cookie类似，都是通过域名区判别，即同域名的localStorage是一样的。

    Storage在浏览器中被实现为一个类型，但开发者是不被允许实例化Storage对象的，浏览器已经内置有两个已经实例化好的对象：

1.sessionStorage——存储的数据，只在单个页面的会话期间有效，类似一个页面的全局变量。

2.localStorage——存储的数据，会被持久化到客户端，而且永远不会过期（cookie可以设置过期时间），并且其容量也不像cookie那样受限制；只能存储字符串，如果试图存储其他类型的数据，将会被强制转换成字符串。

    基本使用

<script type="text/javascript">
        window.onload=function () {
            if(window.localStorage){//检测浏览器是否支持localStorage
                //存储几个键值对
                localStorage[\'book\'] = \'H5 开发\';
                localStorage.setItem(\'author\',\'yexd\');
                localStorage.setItem(\'2016\',\'year\');
                //读取
                console.info(localStorage.getItem(\'book\')); //H5 开发
                console.info(localStorage.author);           //yexd
                console.info(localStorage[\'2016\']);         //year
                //删除
                delete localStorage[\'author\'];
                console.info("删除author后：" + localStorage[\'author\']);  //删除author后：undefined
                localStorage.removeItem(\'2016\');
                console.info("删除2016后：" + localStorage[\'2016\']);      //删除2016后：undefined
                localStorage.clear();//删除所有的key
            }
        }
    </script>

存储json

    如果Storage要存储JSON对象，则可以先使用window.JSON对象提供的stringify和parse方法对JSON数据进行序列化和反序列化。

//存储JSON
var jsonAuthor = {
    \'name\':\'filod lin\'
 }
localStorage[\'jsonAuthor\'] = jsonAuthor ;
console.info(localStorage[\'jsonAuthor\']); //[Object,Object]
localStorage[\'jsonAuthor\'] = JSON.stringify(jsonAuthor);
console.log(JSON.parse(localStorage[\'jsonAuthor\']).name); //filod lin

属性与方法

    由于localStorage与SessionStorage都是Storage的实例，它们共享Storage接口提供的一组方法和属性：

1.setItem(key,value)，设置一个key；

2.getItem(key)，获取一个key对应的name；

3.removeItem(key)，移除一个key；

4.length，Storage对象中item的数量，类似数组length属性；

5.key(n)，用于访问第n个key的名称；

6.clear()，清除当前域下的所有localStorage内容。

事件-不建议使用

    对Storage对象进行的所有修改都会触发文档上的Storage事件。但这个事件的触发有些特殊：

1.本页面的修改不会触发事件，需要别的页面修改，才会触发Storage事件，如下面的代码在A页面，A页面修改了Storage的值，但不会触发function的执行，而是B页面（同一个域）修改了Storage的值，才会触发A页面的function。

2.修改必须是数据发生变化，即存储区的数据为空，执行clear是不会触发事件；修改的值与原本的值相同也同理。

该事件对象有如下属性：

1.domain：发生变化的域名。

2.key：发生修改的键。

3.oldValue：修改前的值。

4.newValue：修改后的值（如果是删除一个键，则为null）。

<script type="text/javascript">
        window.onload=function () {
            if(window.localStorage){//检测浏览器是否支持localStorage
                window.addEventListener("storage",function (e) {
                    //尚无浏览器完整实现这些事件
                    console.log("监听Storage事件，Storage的值被改变时触发。 key=" + e.key + " ；原值 "
                            + e.oldValue + " ；新值=" + e.newValue +"；URL=" + e.url);
                });
            }
        }
    </script>

该事件不建议使用的原因：

1.sessionStorage和localStorage都会触发此事件，但无法区分是谁触发的；

2.有兼容问题。

小例子-计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问计数器</title>
</head>
<body>
    本次访问已经查看过该页面<span id="count1"></span>次<br/>
    历史上你已经查看过该页面<span id="count2"></span>次<br/>
    <button id="btn">清零</button>
    <script type="text/javascript">
        function updateCounter() {
            document.getElementById("count1").innerHTML = sessionStorage.pageLoadCount || 0;
            document.getElementById("count2").innerHTML = localStorage.pageLoadCount || 0;
        }
        //第一次进入页面时，将两个计数都设置为0
        if(sessionStorage.getItem("pageLoadCount") == null){
            sessionStorage.setItem("pageLoadCount",0);
        }
        if(localStorage.getItem("pageLoadCount") == null){
            localStorage.setItem("pageLoadCount",0);
        }
        //每次加载页面，把存储的数据取出后增1
        sessionStorage.pageLoadCount = parseInt(sessionStorage.getItem("pageLoadCount")) + 1;
        localStorage.pageLoadCount = parseInt(localStorage.getItem("pageLoadCount")) + 1;
        updateCounter();
        document.getElementById("btn").onclick = function () {
            localStorage.clear();
            sessionStorage.clear();
            updateCounter();
        }
    </script>
</body>
</html>

来自为知笔记(Wiz)