基于js 本地存儲(詳解)
在客戶端運行的JS是不能操作用戶電腦磁盤中的文件的(保護客戶端運行的安全)
1、JS中的本地存儲:
使用JS向瀏覽器的某一個位置中存儲一些內(nèi)容,瀏覽器即使關(guān)閉了,存儲的信息也不會銷毀,當(dāng)在重新打開瀏覽器的時候我們依然可以獲取到上一次存儲的信息
本地存儲的方案:
傳統(tǒng):
cookie:把信息存儲到客戶端的瀏覽器中(但是項目服務(wù)器端也是可以獲取COOKIE的)
session:把信息存儲到服務(wù)器上的(服務(wù)器存儲)
HTML5:webStorage
localStorage:永久存儲在客戶端的本地
sessionStorage:信息的會話存儲,會話窗口存在信息也存在,會話窗口關(guān)閉信息就消失了
2、COOKIE localStorage sessionStorage
->webStorage
setItem([key],[value]):像客戶端的本地存儲一條記錄,存儲的[value]需要是字符串格式的,如果編寫的不是字符串,瀏覽器會默認的轉(zhuǎn)化為字符串然后在進行存儲;同源下存儲的[key]是不會重復(fù)的,如果之前有的話,是把存儲的信息值進行修改。如果存儲的value是一個對象,需要先使用JSON.stringify()進行轉(zhuǎn)化。
getItem([key]):獲取之前存儲的值
removeItem([key]):移除KEY對應(yīng)的存儲記錄
clear():把當(dāng)前源下的所有的存儲記錄都移除掉
localStorage.length:獲取存儲的記錄條數(shù)
localStorage.key(0):獲取索引為0這一項的KEY是什么
localStorage.setItem('age',7);
localStorage.getItem('age');
localStorage.removeItem('age');
localStorage.clear();
localStorage和sessionStorage的區(qū)別
localStorage屬于永久存儲在本地,不管是刷新頁面還是關(guān)掉頁面或者關(guān)閉瀏覽器,存儲的內(nèi)容都不會消失,只有我們自己手動的去刪除才會消失(不管是殺毒軟件還是瀏覽器自帶的清除歷史記錄功能都不能把localStorage存儲的內(nèi)容清除掉)
sessionStorage屬于臨時的會話存儲,只要當(dāng)前的頁面不關(guān)閉,信息就可以存儲下來,但是頁面一旦關(guān)閉,存儲的信息就會自動清除(F5刷新頁面只是把當(dāng)前的DOM結(jié)構(gòu)等進行重新的渲染,會話并沒有關(guān)閉)
cookie
document.cookie = 'age = 7'
cookie和localStorage的區(qū)別
1)、cookie
cookie存儲內(nèi)容的大小是有限制的,一般同源下只能存儲4kb的內(nèi)容;localStorage存儲的內(nèi)容也有大小限制,一般同源下只能存儲5MB
cookie存儲的內(nèi)容是有過期時間的,而localStorage是永久存儲到本地,使用殺毒軟件或者瀏覽器自帶的清除垃圾的功能都可能會把存儲的cookie給刪除掉
用戶可能處于安全的角度禁用cookie(無痕瀏覽器),但是不能禁止localStorage
真是項目中的本地存儲都使用哪些東西?
記住用戶名密碼或者自動登錄;用戶的部分信息,當(dāng)用戶登錄成功后我們會把用戶的一些信息記錄到本地的cookie中,這樣在項目中的任何頁面都可以知道當(dāng)前登錄的用戶是哪一個了;購物車...(存儲少量信息或者是需要瀏覽器兼容的都需要使用cookie來進行存儲)
2)、localStorage
在PC端我們可以用其存儲 某一個JS或者CSS中的源代碼;還可以把一些不需要經(jīng)常更新的數(shù)據(jù)存儲到本地,存儲的時候可以設(shè)置一個存儲的時間,以后重新刷新頁面,看一下時間有沒有超過預(yù)定的時間,如果已經(jīng)過時了,我們從新獲取最新數(shù)據(jù),沒超過我們使用本地數(shù)據(jù)。
本地存儲都是明文存儲
對于重要的信息我們一般不要存儲到本地,如果非要存儲的話我們需要把存儲的信息進行加密
可逆轉(zhuǎn)加密:加密完成還可以解密回來
不可逆轉(zhuǎn)加密:MD5
以上這篇基于js 本地存儲(詳解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- JavaScript本地存儲的幾種方式小結(jié)
- Javascript本地存儲localStorage看這一篇就夠了
- 詳解JavaScript前端如何有效處理本地存儲和緩存
- JavaScript本地存儲全面解析
- javascript中l(wèi)ocalStorage本地存儲(新增、刪除、修改)使用詳細教程
- JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用
- JS實現(xiàn)本地存儲信息的方法(基于localStorage與userData)
- javascript中本地存儲localStorage,sessionStorage,cookie,indexDB的用法與使用場景匯總
相關(guān)文章
Bootbox將后臺JSON數(shù)據(jù)填充Form表單的實例代碼
通過控制器創(chuàng)建一個Index視圖,寫入下列HTML代碼,這里我創(chuàng)建了一個分部視圖,不創(chuàng)建直接寫在同一個頁面也是一樣的效果。這篇文章主要介紹了Bootbox將后臺JSON數(shù)據(jù)填充Form表單 ,需要的朋友可以參考下2018-09-09
關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級
原來是由于IE瀏覽器以及Firefox對于冒泡型事件的支持層次不同造成的。(如對冒泡事件不是很了解可先查詢相關(guān)資料)2010-10-10
BootStrap點擊保存后實現(xiàn)模態(tài)框自動關(guān)閉的思路(模態(tài)框)
這篇文章主要介紹了BootStrap點擊保存后實現(xiàn)模態(tài)框自動關(guān)閉的思路(模態(tài)框),需要的朋友可以參考下2017-09-09
Bootstrap的fileinput插件實現(xiàn)多文件上傳的方法
這篇文章主要介紹了Bootstrap的fileinput插件實現(xiàn)多文件上傳的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09
JS動態(tài)添加與刪除select中的Option對象(示例代碼)
本篇文章主要介紹了JS動態(tài)添加與刪除select中的Option對象(示例代碼) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12
React+Typescript實現(xiàn)倒計時Hook的方法
本文主要介紹了React+Typescript實現(xiàn)倒計時Hook的方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09

