js如何實現本地存儲

這篇文章主要介紹了js如何實現本地存儲，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在客戶端運行的JS是不能操作用戶電腦磁盤中的文件的（保護客戶端運行的安全）

1、JS中的本地存儲：

使用JS向瀏覽器的某一個位置中存儲一些內容，瀏覽器即使關閉了，存儲的信息也不會銷毀，當在重新打開瀏覽器的時候我們依然可以獲取到上一次存儲的信息

本地存儲的方案：

傳統：

cookie:把信息存儲到客戶端的瀏覽器中（但是項目服務器端也是可以獲取COOKIE的）

session:把信息存儲到服務器上的（服務器存儲）

HTML5:webStorage

localStorage:永久存儲在客戶端的本地

sessionStorage:信息的會話存儲，會話窗口存在信息也存在，會話窗口關閉信息就消失了

2、COOKIE  localStorage sessionStorage

->webStorage

setItem([key],[value])：像客戶端的本地存儲一條記錄，存儲的[value]需要是字符串格式的，如果編寫的不是字符串，瀏覽器會默認的轉化為字符串然后在進行存儲；同源下存儲的[key]是不會重復的，如果之前有的話，是把存儲的信息值進行修改。如果存儲的value是一個對象，需要先使用JSON.stringify()進行轉化。

getItem([key]):獲取之前存儲的值

removeItem([key]):移除KEY對應的存儲記錄

clear()：把當前源下的所有的存儲記錄都移除掉

localStorage.length：獲取存儲的記錄條數

localStorage.key(0)：獲取索引為0這一項的KEY是什么

localStorage.setItem('age',7);

localStorage.getItem('age');

localStorage.removeItem('age');

localStorage.clear();

localStorage和sessionStorage的區別

localStorage屬于永久存儲在本地，不管是刷新頁面還是關掉頁面或者關閉瀏覽器，存儲的內容都不會消失，只有我們自己手動的去刪除才會消失（不管是殺毒軟件還是瀏覽器自帶的清除歷史記錄功能都不能把localStorage存儲的內容清除掉）

sessionStorage屬于臨時的會話存儲，只要當前的頁面不關閉，信息就可以存儲下來，但是頁面一旦關閉，存儲的信息就會自動清除（F5刷新頁面只是把當前的DOM結構等進行重新的渲染，會話并沒有關閉）

cookie

document.cookie = 'age = 7'

cookie和localStorage的區別

1）、cookie

cookie存儲內容的大小是有限制的，一般同源下只能存儲4kb的內容；localStorage存儲的內容也有大小限制，一般同源下只能存儲5MB

cookie存儲的內容是有過期時間的，而localStorage是永久存儲到本地，使用殺毒軟件或者瀏覽器自帶的清除垃圾的功能都可能會把存儲的cookie給刪除掉

用戶可能處于安全的角度禁用cookie（無痕瀏覽器），但是不能禁止localStorage

真是項目中的本地存儲都使用哪些東西?

記住用戶名密碼或者自動登錄；用戶的部分信息，當用戶登錄成功后我們會把用戶的一些信息記錄到本地的cookie中，這樣在項目中的任何頁面都可以知道當前登錄的用戶是哪一個了；購物車...(存儲少量信息或者是需要瀏覽器兼容的都需要使用cookie來進行存儲)

2）、localStorage

在PC端我們可以用其存儲 某一個JS或者CSS中的源代碼；還可以把一些不需要經常更新的數據存儲到本地，存儲的時候可以設置一個存儲的時間，以后重新刷新頁面，看一下時間有沒有超過預定的時間，如果已經過時了，我們從新獲取最新數據，沒超過我們使用本地數據。

本地存儲都是明文存儲

對于重要的信息我們一般不要存儲到本地，如果非要存儲的話我們需要把存儲的信息進行加密

可逆轉加密:加密完成還可以解密回來

不可逆轉加密:MD5　

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何實現本地存儲”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!