前端存儲

binaryTree 發(fā)布于2019-08-06 13:30 / 1510人閱讀

摘要：前端存儲簡介一種在前端保存數據的思想。為了保證前端性能，一般不會保存大量數據。在手動刪除前一直存在關閉當前頁面后被清除可存放大小與服務器通信每次都在頭部信息中。

前端存儲 簡介

一種在前端保存數據的思想。第一次在頁面中的保存數據，那么從第二次開始就可以使用了。可以使用的方法有：

localeStorage

sessionStorage

ie的userData

web sql

indexedDB

從技術角度看待這些方法。沒有高低之分，只有對特定任務是否合適。

cookie 簡介

cookie："小餅干，小甜品"

參與http通信。因為在http中可以看到cookie，所以易受到攻擊。

面向路徑。只作用于當前路徑（頁面）。

每個cookie < 4K

運行機制

使用

總結

設置cookie的值

function setCookie(key, value, duration) {
    // duration 單位為ms
    var d = new Date();
    document.cookie = key + "=" + value + "; " + d.getTime() + duration
}

獲取cookie的值

function getCookie(key) {
    var cookieArr = document.cookie.split(";");
    for (var i = 0; i < cookieArr.length; i++) {
        var cookie = cookieArr[i].trim();
        if (cookie.indexOf(key)===0) {
            return cookie.substring(key.length, key.cookie.length);
        }
    }
}

localStorage/sessionStorage

localStorage < 5M

localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage。可以在同網站下跨頁面。

sessionStorage只作用于當前頁面。

優(yōu)勢
1、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的數據庫，相比于cookie可以節(jié)約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

局限
1、瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
5、localStorage不能被爬蟲抓取到

使用

一般在第一次加載頁面時在本地保存好數據。從第二次開始使用本地保存的數據。為了保證前端性能，一般不會保存大量數據。只保存關鍵數據，再根據它做出判斷后執(zhí)行相應的程序。

window.localStorage//boolean 瀏覽器是否支持

寫入(3種形式)

window.localStorage["a"] = 1;
window.localStorage.b = 1;
window.setItem("c",3);

讀取

var a = window.localStorage.a;
var b = window.localStorage["b"];
var c = window.localStorage.getItem("c");
var d = window.localStorage.key(d);

修改

window.localStorage.a = 4;

刪除

window.localStorage.clear();// 清除據
window.localStorage.removeItem("a");// 刪除a

方法

localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

三者的區(qū)別

特性	cookie	localStorage	sessionStorage
生命周期	一般由服務器生成，可設置失效時間。若在瀏覽器生成，默認關閉瀏覽器后失效。	在手動刪除前一直存在	關閉當前頁面后被清除
可存放大小	<4k	<5m	<5m
與服務器通信	每次都在http頭部信息中。過多會影響性能	僅在客戶端不能與通信	僅在客戶端不能與通信
易用性	原生的方法較難使用，自己封裝后會好用。	原生的方法就挺好用。可再交封裝	原生的方法就挺好用。可再交封裝

2018/04/03 by stone

云服務器 GPU云服務器 js前端存儲方式框架net數據存儲前端前端前端前端編程前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61954.html

前端存儲 - localStorage

摘要：發(fā)布自的博客，歡迎大家轉載，但是要注意注明出處介紹在中，引入了兩個新的前端存儲特性這兩者非常相似，都是用來在前端保存一定量的數據，稱為前端存儲，但是這兩者仍然存在一定區(qū)別生命周期的生命周期是永久的，即使關閉頁面瀏覽器，其中的內容也不會消失，發(fā)布自Kindem的博客，歡迎大家轉載，但是要注意注明出處 localStorage 介紹在HTML5中，引入了兩個新的前端存儲特性： loc...

DandJ 2019-08-22 18:34 評論0 收藏0
前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）

摘要：前端最基礎的就是。這是初級階段的最后一堂了。敏感數據要設置防止意外的被他人獲取。是什么服務器端存放數據。都是用來做瀏覽器端存儲的。解決的問題的存儲大小問題。該使用索引來實現(xiàn)對該數據的高性能搜索。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

lifefriend_007 2019-08-26 18:27 評論0 收藏0
[聊一聊系列]聊一聊前端存儲那些事兒

摘要：如圖圖顧名思義，，是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發(fā)越來越復雜的今天，前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...

caige 2019-08-19 18:46 評論0 收藏0
你知道前端對圖片的處理方式嗎？

摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現(xiàn)說的，前端用容器接收。前言作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經驗。一、情景再現(xiàn) 用postman請求接口...

helloworldcoding 2019-08-23 15:28 評論0 收藏0