web存储

时间 2019-12-06

标签 web 存储栏目 HTML 繁體版

原文原文链接

1、存储遵循同源原则

2、几种形式

1. web存储API

1）本地存储：localstorage对象

<body>
<input id="ipu"/>
<button id="btn">存储</button>
<script>
    var btn = document.getElementById('btn');
    var str = document.getElementById('ipu');
    if(localStorage.myKey != undefined){
        str.value = localStorage.myKey;
    }
    btn.onclick = function () {
        localStorage.myKey = str.value;
    };
</script>
</body>

A. localstorage对象存储的数据有效期为永远！永不过时。javascript

B. 遵循同源策略java

C. 受浏览器供应商限制，不一样的浏览器不能相互访问相同页面的localstorage！web

2）会话存储：sessionStorage对象

<body>
<input id="ipu"/>
<button id="btn">存储</button>
<script>
    var btn = document.getElementById('btn');
    var str = document.getElementById('ipu');
    if(sessionStorage.myKey2 != undefined){
        //这段在从新打开一个页面窗口的时候实际上是不起效的
        //但在同一窗口不关闭的状况下刷新能起做用！
        str.value = sessionStorage.myKey2;
    }
    btn.onclick = function () {
        sessionStorage.myKey2 = str.value;
    };
</script>
</body>

A. sessionStorage存储的数据随窗口的声明周期。一旦窗口或者标签被永远关闭了，那么全部经过sessionstorage存储的数据也会都被删除！浏览器

B. 遵循同源策略服务器

C. 受浏览器供应商限制，不一样的浏览器不能相互访问相同页面的sessionStorage！cookie

2. cookie

1）cookie做为早期的客户端存储机制，只能存储少许的数据。能够在web浏览器和web服务器之间进行传输。能够自定义它的有效期（max-age）和做用域（path属性）。session

2）遵循同源策略。

spa