cookie、sessionStorage、localStorage 详解及应用场景

时间 2019-11-07

标签 cookie sessionstorage localstorage 详解应用场景栏目 HTML 繁體版

原文原文链接

cookie、sessionStorage、localStorage 详解及应用场景

Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生javascript

cookie

Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在html

了解cookie

要表示惟一的一个cookie值须要：name、domain、path前端
一个cookie就是一个小型的文本文件html5
虽然cookie保存在浏览器端，可是通常是在服务器端设置的。java
能够在HTTP返回体里，经过设置Set-Cookie来告诉浏览器端所要存储的cookie。chrome
用来保存客户浏览器请求服务器页面的请求信息后端

cookie相关字段的说明

名称：一个惟一肯定cookie的名称。cookie名称是不区分大小写的。cookie的名称必须是通过URL编码的。数组
值：储存在cookie中的字符串值。值必须被URL编码。浏览器
域：cookie对于哪一个域是有效的。全部向该域发送的请求中都会包含这个cookie信息。若是没有明确设定，那么这个域会被认做来自设置cookie的那个域。安全
路径：对于指定域中的那个路径，应该向服务器发送cookie。例如，你能够指定cookie只有从http://www.wrox.com/books/中才能访问，那么http://www.wrox.com的页面就不会发送cookie信息，即便请求都是来自同一个域的。
失效时间：表示cookie什么时候应该被删除的时间戳（也就是，什么时候应该中止向服务器发送这个cookie）。默认状况下，浏览器会话结束时即将全部cookie删除；不过也能够本身设置删除时间。这个值是个GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SSGMT），用于指定应该删除cookie的准确时间。所以，cookie可在浏览器关闭后依然保存在用户的机器上。若是你设置的失效日期是个之前的时间，则cookie会被马上删除。
安全标志：指定后，cookie只有在使用SSL链接的时候才发送到服务器。例如，cookie信息只能发送给 https://www.wrox.com，而http://www.wrox.com的请求则不能发送 cookie。

cookie的应用场景

简单来讲，Cookie就是服务器暂存放在你的电脑里的资料（.txt格式的文本文件），好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookie 会把你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookie资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。
网站能够利用cookie跟踪统计用户访问该网站的习惯，好比什么时间访问，访问了哪些页面，在每一个网页的停留时间等。利用这些信息，一方面是能够为用户提供个性化的服务，另外一方面，也能够做为了解全部用户行为的工具，对于网站经营策略的改进有必定参考价值。
目前Cookie最普遍的是记录用户登陆信息，这样下次访问时能够不须要输入本身的用户名、密码了——固然这种方便也存在用户信息泄密的问题，尤为在多个用户共用一台电脑时很容易出现这样的问题。

设置／修改 `cookie`

cookie的原生的API，须要咱们本身进行封装

//直接复制 【直接复制不是覆盖，而是追加】
document.cookie = 'name=value;'

//封装setCookie方法
//setCookie 首先对name和value进行编码
function setCookie(name,value,expires,path,domain,secure){

    var cookie = encodeURIComponent(name)+ '=' +encodeURIComponent(value);
    
    //注意分号后面要有空格
    //后面的4个参数是可选的，因此用if判断并追加
     
    if(expires){
        cookie +='; expires='+expires.toGMTString();
    }
    if(path){
        cookie += '; path='+path;
    }
    if(domain){
        cookie += '; domain='+domain;
    }
    if(secure){
        cookie += '; secure='+secure;
    }
    document.cookie = cookie;
}

删除cookie

输入参数为name、path、domain 这3个是惟一标识cookie的,将max-age设置为0，就能够当即删除了.

function remove(name,domain,path){
    document.cookie = 'name='+name
                    +'; domain='+domain
                    +'; path='+path
                    +'; max-age=0';
}

cookie缺点

Cookie数量和长度的限制。IE6或更低版本每一个domian下最多20个cookie，IE7和以后的版本最多能够有 50个cookie，Firefox最多50个cookie，chrome和Safari没有作硬性限制，每一个cookie长度不能超过4KB，不然会被截掉。
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。这就致使不能永久储存信息。
安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。
而且每次你请求一个新的页面的时候，cookie只要知足做用域和做用路径，Cookie都会被发送过去，这样无形中浪费了带宽。

本地储存

Web Storage是为了在本地“存储”数据而生。html5中的 Web Storage 包括了两种存储方式：sessionStorage和localStorage

localStorage && sessionStorage

只要有效期和做用域，浏览器每次访问的时候都会将Storage载入到内存里

localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁
localStorage也受同源策略的限制。
localStorage和sessionStorage都具备相同的操做方法，如setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。

localStorage应用场景

localStorage能够用于存储该浏览器对该页面的访问次数，固然，若是换个浏览器，这个次数就从新开始计数了。还能够用来存储一些固定不变的页面信息，这样就不须要每次都从新加载了，这个值也能够进行覆盖。

访问这个页面的时候，script 脚本会自动运行，localStorage.pagecount就会 ++ 了，从而达到统计页面访问次数的目的。

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else{
    localStorage.pagecount=1;
}

document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新页面会看到计数器在增加。</p>

<p>请关闭浏览器窗口，而后再试一次，计数器会继续计数。</p>

</body>
</html>

sessionStorage应用场景

使用 sessionStorage 进行页面传值

//有时会有这样的需求，咱们从A页面获取的数据，须要在B页面发送给后端，这时就须要咱们将数据从A页面传递到B页面。

//A页面
//首先检测Storage
if (typeof(Storage) !== "undefined") {
    sessionStorage.'name'=value;
} else {
    sessionStorage.name = '';
}


//B页面
if (typeof(Storage) !== "undefined") {
    var B_name = sessionStorage.name;
    }

//注意，若是要储存的数据对象、数组
//那么在储存以前，用JSON.stringify将数据转换为字符串
//读取以后，再用JSON.parse转换为对象、数组

//存储
var obj = {name:"xiaoxiong",age:25};
var arr = [1,2,3,4];
window.sessionStorage.obj = JSON.stringify(obj);
window.sessionStorage.arr = JSON.stringify(arr);

//读取
var OBJ = window.sessionStorage.obj;//"{"name":"xiaoxiong","age":25}"
JSON.parse(OBJ);//Object {name: "xiaoxiong", age: 25}

var ARR = window.sessionStorage.arr;//"[1,2,3,4]"
JSON.parse(ARR);//(4) [1, 2, 3, 4]

总结一下：cookie数量和长度都有限制，Web Storage解决了这样的限制，且localStorage作到了永久储存。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

cookie、sessionStorage、localStorage 详解及应用场景

cookie、sessionStorage、localStorage 详解及应用场景

cookie

了解cookie

cookie相关字段的说明

cookie的应用场景

设置／修改 cookie

删除cookie

cookie缺点

本地储存

localStorage && sessionStorage

localStorage应用场景

sessionStorage应用场景

设置／修改 `cookie`