如何實現(xiàn)數(shù)據(jù)持久化

一般情況下，借用本地存儲用的比較多，或者一些插件，如vue的keep-alive，配合redux使用的persist

為什么需要數(shù)據(jù)持久化

1、減少發(fā)起請求的次數(shù)，從而提高性能。

場景：比如一個網(wǎng)站，數(shù)據(jù)是每天更新一次，間隔時間長，當然就可以將請求到的信息存儲到本地，第二次進入獲取信息從本地拿

2、用戶體驗方面

登陸的狀態(tài)，不用每次都需要登陸
表單填寫，切換頁面之后數(shù)據(jù)不會消失

實現(xiàn)數(shù)據(jù)持久化的方法

1、localStorge

特性: 永久存儲,手動清除,存儲大小5M

語法：取值 : localStorage.getItem('key') 存值 : localStorage.setItem('key','value') 清除單個值 : localStorage.removeItem('key')清除所有值 ：localStorage.clear( )

2、sessionStorage

特性：關閉瀏覽器存儲清空，其余與localStorage一樣

3、cookie

特性：可設置存儲時間，存儲大小4k，后端可以直接獲取，設置，所以前端一般不操作

語法獲取本地cookie ：document.cookie( )設置cookie ：document.cookie = 'key=value'向后追加，不是替換expires 指定Cookie過期時間;格式采用Date.toUTCString()domain 指定發(fā)送Cookie的域名path 指定Cookie的路徑secure 指定Cookie只能在加密協(xié)議HTTPS下發(fā)送到服務器,值是一個布爾值 var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000));document.cookie = 'userName=fengkaicahng;expires='+day +';domain=fengkaichang.com;path=/;secure=true'

總結

以上是生活随笔為你收集整理的前端性能——数据持久化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。