电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

詳解JS瀏覽器儲存

瀏覽:113日期:2024-03-28 13:59:00
引言

隨著對前端的了解越來越深入,了解到了很多種瀏覽器的存儲方案,如 Cookie、LocalStorage等,哪這些存儲方案有何異同,分別的適用場景又是什么呢。

Cookie

Cookie的來源

Cookie 被創造出來的本意并不是本地儲存,而是為了辨別用戶身份。眾所周知,Http 協議是無狀態的,也就是說你每一次發送給服務器的請求對于服務器來說都是孤立的,服務器不知道這這些請求來自于誰。比如你向購物車里面添加了一些商品,但是當發送結賬請求的時候服務器懵了,我怎么知道你是誰,你買了什么呢。而使用 Cookie 之后,服務器就可以通過查看 Cookie 來判斷發送用戶,一定程度上 Cookies 可以說是請求的身份證??梢愿嬖V服務器請求發送自誰。

Cookie是什么

百聞不如一見,直接來看看 Cookie 長啥樣

詳解JS瀏覽器儲存

這是百度首頁使用的 Cookie ,如你所見,Cookie 是以 Name-Value 鍵值對儲存在瀏覽器中的,其中 Value 又是明顯經過了加密的數據。

Cookie生成方式

Cookie 是所屬于域名的,還是百度首頁的 Cookie,通過 Domain 屬性可以得知前兩個 Cookie 是屬于 .baidu.com 的

詳解JS瀏覽器儲存

每個域名只能設置與訪問到自己域名下的 Cookie,比如 baidu.com 無法訪問 Domain 為 sougou.com 的 Cookie。但是子域名可以讀取父域名設置的Cookie,比如截圖中 www.baidu.com 就讀取到了 Domain=’.baidu.com’ 的Cookie,通過手動設置 Domain 可以設置父域名的 Cookie,比如 www.baidu.com 可以設置Domain=’baidu.com’這樣 *.baidu.com 所有二級域名也能讀取到它設置的 Cookie

//www.baidu.comdocument.cookie=’age=20;domain=.baidu.com’// 此時 所有二級域名可以直接讀取到這個 Cookie

Cookie的生成方式分為 服務器端生成和瀏覽器端生成。

服務器端-通過設置 http response header中的set-cookie

我們可以通過響應頭里的 Set-Cookie 指定要存儲的 Cookie 值。當請求返回瀏覽器的時候瀏覽器就會按照 header 中的 set-cookie 值設置 Cookie。默認情況下,Domain 被設置為設置 Cookie 頁面的主機名,當然我們也可以手動設置 Domain 的值。

Set-Cookie: id=a3fWa;

瀏覽器端-js中可以通過document.cookie可以讀寫cookie,以鍵值對的形式展示

document.cookie='id=a3fWa'document.cookie=’age=20;domain=.baidu.com’Cookie的應用場景

既然 Cookie 的作用就是告訴服務器請求來自于誰,那么最主要的作用就是保持用戶登陸態(記住密碼),除此之外還可以記錄用戶瀏覽數據,進行廣告推送和前文提到的購物車等。

Cookie的缺點

缺點其實在前文中就很顯而易見了

不夠大

Cookie 會隨著每一次請求發送,這就注定了 Cookie 必定會有嚴格的大小限制,每一個 Cookie 的大小被限制在了 4kb,值得注意的是 4kb 指的是一個 Name-Value 的大小,而并不是說這個域名可以設置的 Cookie 總大小只有 4kb

性能缺陷

Cookie 是跟隨著域名的,會隨著每一個同域名請求發送,但是其實很大一部分請求,比如說圖片等靜態資源的請求是完全用不著 Cookie 的,雖然每個Cookie只有 4kb 但是積少成多也會帶來巨大的資源浪費。

我們可以把靜態資源放到 CDN 上去,這時候圖片域名就和主站域名不相同了,就不會附帶發送 Cookie

不夠安全

正如上文直接打開控制臺就可以看到 Cookie 一樣,Cookie 雖然通過編碼進行了加密,但在 Http 傳輸中是明文傳輸,腳本也可以很輕松的獲取到 Cookie,非常容易被破解。

在服務器端設置 Cookie 的時候附帶上 HttpOnly 標記,這樣在瀏覽器端就無法使用 document.cookie 訪問到這個 Cookie 了

Set-Cookie: id=a3fWa; HttpOnly

標記為 Secure 的 Cookie 只應通過 Https 協議加密過的請求發送,但是即便如此也不應該使用 Cookie 儲存敏感信息,因為 Cookie 有其固有的不安全性,這兩個標記也無法提供確切的安全保障。

解決方法

既然 Cookie 有這么多缺點,有沒有什么一勞永逸的解決方法呢,那就是「專業的人做專業的事」。

用戶登錄態和部分用戶信息的存儲的工作交給 Seesion ---即 Cookie 只用來儲存一個用戶唯一標識符,真正信息儲存在服務器端,使用 Cookie 作為 SeesionID 去服務器查找信息,這樣一來 Cookie 的容量限制,安全問題都引刃而解了,因為此時 Cookie 里面就是一串無意義的隨機碼。

本地儲存得工作交由html5 中新增本地存儲的解決方案「Web Storage」,它又分成兩類 :localStorage和SessionStorage,接下來就介紹這兩兄弟。

LocalStorage特點 數據長時間保存,直到手動刪除為止 大小約為 5M 和 Cookie 一樣,一個網站只能訪問和操作自己網站域名下的數據 僅在客戶端使用,和服務端無通信 接口封裝較好 使用鍵值對保存信息 同源窗口都可以訪問使用示例

LocalStorage 使用非常方便:

// 設置數據localStorage.setItem('key','value');//讀取數據let valueLocal = localStorage.getItem('key');使用場景

通過上面那些特性就可以看出 LocalStorage 非常適合用來做本地緩存,可以提高首屏加載速度。一些圖片等不會經常改變的大資源也可以緩存下來,減少網絡請求。

SeesionStorage特點 保存時間為本次會話,也就是說窗口關閉就沒了 僅本窗口可以訪問,同源的其他窗口都不行大 小約為 5M使用場景

sessionStorage 更適合用來存儲生命周期和它同步的會話級別的信息。這些信息只適用于當前會話,比如可以用來做表單數據的持久化,防止刷新后表單數據丟失

Cookie、LocalStorage 和SessionStorage 之間的區別作用域的不同

這三者都遵循協議,即同協議,同域名,同端口下才能訪問和修改同一份數據,唯一不同的就是 SeesionStorage 還要求在同一窗口。

生命周期的不同 Cookie可以手動設置過期時間,默認就是本次會話時長,隨著窗口關閉而刪除,當設置了過期時間時候,就會被儲存到硬盤中直到過期時間才被刪除 LocalStorage是持久化的本地儲存,除非你手動刪除,否則會一直存在 SessionStorage是會話級別的存儲,也是隨著窗口關閉而刪除??偨Y

這就是幾種瀏覽器存儲方案,當然還有我們應該根據不同方案各自的特點決定什么時候使用什么方案,適合的才是最好的??偨Y一下本文的幾個重點

Cookie 的本職工作并非本地存儲,而是“維持狀態” Web Storage 是html5 專門為瀏覽器存儲而提供的數據存儲機制,不與服務端發生通信

以上就是詳解JS瀏覽器儲存的詳細內容,更多關于JS瀏覽器儲存的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 泰国试管婴儿_泰国第三代试管婴儿_泰国试管婴儿费用/多少钱_孕泰来 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 广东泵阀展|阀门展-广东国际泵管阀展览会 | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | HYDAC过滤器,HYDAC滤芯,现货ATOS油泵,ATOS比例阀-东莞市广联自动化科技有限公司 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 工程管道/塑料管材/pvc排水管/ppr给水管/pe双壁波纹管等品牌管材批发厂家-河南洁尔康建材 | 禹城彩钢厂_钢结构板房_彩钢复合板-禹城泰瑞彩钢复合板加工厂 | 免联考国际MBA_在职MBA报考条件/科目/排名-MBA信息网 | 管形母线,全绝缘铜管母线厂家-山东佰特电气科技有限公司 | 济南网站策划设计_自适应网站制作_H5企业网站搭建_济南外贸网站制作公司_锐尚 | 湖南教师资格网-湖南教师资格证考试网 | 酒万铺-酒水招商-酒水代理| 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | HYDAC过滤器,HYDAC滤芯,现货ATOS油泵,ATOS比例阀-东莞市广联自动化科技有限公司 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 电子海图系统-电梯检验系统-智慧供热系统开发-商品房预售资金监管系统 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 数码听觉统合训练系统-儿童感觉-早期言语评估与训练系统-北京鑫泰盛世科技发展有限公司 | 河南15年专业网站建设制作设计,做网站就找郑州启凡网络公司 | 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 | 瓶盖扭矩仪(扭力值检测)-百科| 低噪声电流前置放大器-SR570电流前置放大器-深圳市嘉士达精密仪器有限公司 | app开发|app开发公司|小程序开发|物联网开发||北京网站制作|--前潮网络 | Jaeaiot捷易科技-英伟达AI显卡模组/GPU整机服务器供应商 | lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 电子书导航网_电子书之家_电子书大全_最新电子书分享发布平台 | 北京律师事务所_房屋拆迁律师_24小时免费法律咨询_云合专业律师网 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 电动不锈钢套筒阀-球面偏置气动钟阀-三通换向阀止回阀-永嘉鸿宇阀门有限公司 | 学叉车培训|叉车证报名|叉车查询|叉车证怎么考-工程机械培训网 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 西装定制/做厂家/公司_西装订做/制价格/费用-北京圣达信西装 | 杜甫仪器官网|实验室平行反应器|升降水浴锅|台式低温循环泵 |