前端本地存储的 3 种办法 cookie、localStorage、sessionStorage-外链论坛

7wu1wm0 发表于 2024-10-10 04:12:17

前端本地存储的 3 种办法 cookie、localStorage、sessionStorage

<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">怎样工作</h1>
当网页要发http请求时，浏览器会先检测是不是有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮咱们做的，况且每一次http请求浏览器都会自动帮咱们做。这个特点很重要，由于这关系到“什么样的数据适合存储在cookie中”。
存储在cookie中的数据，每次都会被浏览器自动放在http请求中，倘若这些数据并不是每一个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增多了网络开销；但倘若这些数据是每一个请求都需要发给服务端的数据（例如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。因此针对那种设置“每次请求都要携带的信息（最典型的便是身份认证信息）”就尤其适合放在cookie中，其他类型的数据就不适合了。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">特征</h1>
区别的浏览器存放的cookie位置不同样，亦是不可通用的。
cookie的存储是以域名形式进行区分的，区别的域下存储的cookie是独立的。
咱们能够设置cookie生效的域（当前设置cookie所在域的子域），亦便是说，咱们能够操作的cookie是当前域以及当前域下的所有子域
一个域名下存放的cookie的个数是有限制的，区别的浏览器存放的个数不同样,通常为20个。
每一个cookie存放的内容体积亦是有限制的，区别的浏览器存放体积不同样，通常为4KB。
cookie亦能够设置过期的时间，默认是会话结束的时候，当时间到期自动销毁
cookie值既能够设置，亦能够读取。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie 操作</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">设置</h1>// 客户端设置，重视一次只能设置一个

document.cookie = 名字=值;
document.cookie = username=cfangxu;domain=baike.baidu.com 并且设置了生效域

// 重视：客户端能够设置cookie 的下列选项：expires、domain、path、secure

// 服务器端设置不管你是请求一个资源文件（如 html/js/css/照片），还是发送一个ajax请求，服务端都会返回response。
// 而response header中有一项叫set-cookie，是服务端专门用来设置cookie的。
// Set-Cookie 信息头是一个字符串，其格式如下（中括号中的部分是可选的）：

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

// 重视：一个set-Cookie字段只能设置一个cookie，当你想要设置多个 cookie，需要添加一样多的set-Cookie字段。服务端能够设置cookie 的所有选项：expires、domain、path、secure、HttpOnly<h1 style="color: black; text-align: left; margin-bottom: 10px;">读取</h1>
咱们经过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，它包括了当前网站下所有的cookie（为避免跨域脚本(xss)攻击，这个办法只能获取非 HttpOnly 类型的cookie）。它会把所有的cookie经过一个分号+空格的形式串联起来，例如username=chenfangxu; job=coding
<h1 style="color: black; text-align: left; margin-bottom: 10px;">修改 cookie</h1>
想要修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要重视一点，在设置新cookie时，path/domain这几个选项必定要旧cookie 保持同样。否则不会修改旧值，而是添加了一个新的 cookie。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">删除</h1>
把要删除的cookie的过期时间设置成已过去的时间,path/domain/这几个选项必定要旧cookie 保持同样。document.cookie = uid=dkfywqkrh3;expires= + new Date(0) + ;path=/;secure;
<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie的属性（可选项）</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">过期时间</h1>
倘若咱们想长期存放一个cookie。需要在设置这个cookie的时候同期给他设置一个过期的时间。倘若不设置，cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁// document.cookie = 名叫作=值;expires= + GMT(格林威治时间)格式的日期型字符串;
// 通常设置天数：new Date().setDate( oDate.getDate() + 5 ); 比当前时间多5天 

// 一个设置cookie时效性的例子
function setCookie(c_name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}运用办法：setCookie(username,cfangxu,30)
<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie的域概念（domain选项）</h1>
domain指定了 cookie 将要被发送至哪个或那些域中。默认状况下，domain 会被设置为创建该 cookie 的页面所在的域名，因此当给相同域名发送请求时该 cookie 会被发送至服务器。
浏览器会把 domain 的值与请求的域名做一个尾部比较（即从字符串的尾部起始比较），并将匹配的 cookie 发送至服务器。// 客户端设置

document.cookie = "username=cfangxu;path=/;domain=qq.com"

//如上：“www.qq.com" 与 "sports.qq.com" 公用一个相关的域名"qq.com"，咱们倘若想让 "sports.qq.com" 下的cookie被 "www.qq.com" 拜访，咱们就需要用到 cookie 的domain属性，并且需要把path属性设置为 "/"。

 // 服务端设置

 Set-Cookie: username=cfangxu;path=/;domain=qq.com

 // 注：必定的是同域之间的拜访，不可把domain的值设置成非主域的域名。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie的路径概念（path选项）</h1>
cookie 通常都是因为用户拜访页面而被创建的，可是并不是仅有在创建 cookie 的页面才能够拜访这个 cookie。 由于安全方面的思虑,默认状况下，仅有与创建 cookie 的页面在同一个目录或子目录下的网页才能够拜访。即path属性能够为服务器特定文档指定cookie，这个属性设置的url且带有这个前缀的url路径都是有效的。// 客户端设置
// 最常用的例子便是让 cookie 在根目录下,这般不管是哪个子页面创建的 cookie，所有的页面都能够拜访到了。

document.cookie ="username=cfangxu; path=/"// 服务端设置

Set-Cookie:name=cfangxu;path=/blog

//如上设置：path 选项值会与 /blog，/blogrool 等等相匹配；任何以 /blog 开头的选项都是合法的。需要重视的是，仅有在 domain 选项核实完毕之后才会对 path 属性进行比较。path属性的默认值是发送 Set-Cookie 信息头所对应的 URL 中的path 部分。<h1 style="color: black; text-align: left; margin-bottom: 10px;">domain和path总结：</h1>
domain是域名，path是路径，两者加起来就构成为了 URL，domain和path一块来限制 cookie 能被那些 URL 拜访。 因此domain和path两个个选项一起决定了cookie何时被浏览器自动添加到请求头部中发送出去。倘若无设置这两个选项，则会运用默认值。domain的默认值为设置该cookie的网页所在的域名，path默认值为设置该cookie的网页所在的目录。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie的安全性（secure选项）</h1>
一般 cookie 信息都是运用HTTP连接传递数据，这种传递方式很容易被查看，因此 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那样就需求运用加密的数据传输。
secure选项用来设置cookie仅在保证安全的请求中才会发送。当请求是HTTPS或其他安全协议时，包括 secure 选项的 cookie 才可被发送至服务器。document.cookie = "username=cfangxu; secure"
把cookie设置为secure，只保准 cookie 与服务器之间的数据传输过程加密，而保留在本地的 cookie文件并不加密。就算设置了secure 属性亦并不表率他人不可看到你设备本地保留的 cookie 信息。机密且敏锐的信息绝不该该在 cookie 中存储或传输，由于 cookie 的全部机制本来都是不安全的
重视：倘若想在客户端即网页中经过 js 去设置secure类型的 cookie，必须保准网页是https协议的。在http协议的网页中是没法设置secure类型cookie的。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">httpOnly</h1>
这个选项用来设置cookie是不是能经过 js 去拜访。默认状况下，cookie不会带httpOnly选项(即为空)，因此默认状况下，客户端是能够经过js代码去拜访（包含读取、修改、删除等）这个cookie的。
当cookie带httpOnly选项时，客户端则没法经过js代码去拜访（包含读取、修改、删除等）这个cookie。在客户端是不可经过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能经过服务端来设置。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">localStorage</h1>
HTML5新办法，不外IE8及以上浏览器都兼容。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">特点</h1>
生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
存储的信息在同一域中是共享的。
当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,然则别的页面会触发storage事件。
体积：据述是5M（跟浏览器厂商相关系）
localStorage本质上是对字符串的读取，倘若存储内容多的话会消耗内存空间，会引起页面变卡
localStorage受同源策略的限制
<h1 style="color: black; text-align: left; margin-bottom: 10px;">操作办法</h1>// 获取当前storage中的元素数目
localStorage.Length();

// 设置
localStorage.setItem(name,muou);

// 获取
localStorage.getItem(name);

//亦能够获取键名 , 获取第1个键名
localStorage.key(0);

//删除
localStorage.remove(name);

//亦能够一次性清除所有存储 
localStorage.clear();<h1 style="color: black; text-align: left; margin-bottom: 10px;">storage事件</h1>
当storage出现改变的时候触发。当页面对storage的操作会触发其他页面的storage事件，storage事件是能够跨页面通讯的，在你对storage对象进行任何操作的时候，都会触发storage事件,事件里边包含包含：domain：出现变化的存储空间的域名
key：设置或删除的键名
newValue：倘若是设置值，则是新值；倘若是删除键，则是null
oldValue：键被更改之前的值window.addEventListener(storage, e=>{
console.log(e.domain)
})storage事件运用参考
针对sessionStorage和localStorage上的任何更改都会触发storage事件，但storage事件不会区分这两者;
<h1 style="color: black; text-align: left; margin-bottom: 10px;">sessionStorage</h1>
其实跟localStorage差不多，亦是本地存储，会话本地存储
<h1 style="color: black; text-align: left; margin-bottom: 10px;">操作办法</h1>
和 localStorage 的API完全相同// 获取当前storage中的元素数目
localStorage.Length();

sessionStorage.setItem(key,value) // 存储数据

sessionStorage.getItem(key) // 读取数据

sessionStorage.remove(key) // 删除数据

sessionStorage.clear() // 清空
<h1 style="color: black; text-align: left; margin-bottom: 10px;">特点：</h1>
用于本地存储一个会话（session）中的数据，这些数据仅有在同一个会话中的页面才可拜访并且当会话结束后数据亦随之销毁。因此呢sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。亦便是说只要这个浏览器窗口无关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭标签页后，sessionStorage即被销毁，或在新的标签页打开同源的另一个页面，sessionStorage亦是无的。
应用的场景有，例如说咱们都晓得，在页面刷新的时候，咱们写的js里边的变量函数等等的，内存会被释放掉，那样这个时候能够用sessionStorage来存储有些不想被释放掉内存的数据，例如说记录一个滚动条的位置，或播放器的进度等等
<h1 style="color: black; text-align: left; margin-bottom: 10px;">cookie、localStorage、sessionStorage区别</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">相同：</h1>
在本地（浏览器端）存储数据
<h1 style="color: black; text-align: left; margin-bottom: 10px;">区别：</h1>
sessionStorage和localStorage 都受到同源策略限制，便是跨域问题，在拜访sessionStorage和localStorage 的时候，页面必须在同一个域名，运用同一个协议，并且一个端口
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还需求在同一窗口（亦便是浏览器的标签页）下。
localStorage是永久存储，除非手动删除。
sessionStorage当会话结束（当前页面、标签页关闭的时候，自动销毁）
cookie的数据会在每一次发送http请求的时候，同期发送给服务器而localStorage、sessionStorage不会。
sessionStorage和localStorage 亦有体积限制，相比cookie大了非常多，是5M
sessionStorage和localStorage只能经过客户端操作，cookie既能够经过客户端操作又能够经过服务端操作

7wu1wm0 发表于 2024-10-24 16:48:29

期待楼主的下一次分享！”

页: [1]

外链论坛's Archiver

前端本地存储的 3 种办法 cookie、localStorage、sessionStorage