成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端存儲 - localStorage

DandJ / 2390人閱讀

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

發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處
localStorage 介紹

在HTML5中，引入了兩個新的前端存儲特性：

localStorage

sessionStorage

這兩者非常相似，都是用來在前端保存一定量的數(shù)據(jù)，稱為前端存儲，但是這兩者仍然存在一定區(qū)別：

生命周期：

localStorage: localStorage的生命周期是永久的，即使關(guān)閉頁面、瀏覽器，其中的內(nèi)容也不會消失，除非手動刪除localStorage中的內(nèi)容

sessionStorage: sessionStorage的生命周期是一次瀏覽器窗口會話，瀏覽器窗口指的是一組同源頁面(來自于一個域名)的瀏覽器頁面集合，當(dāng)這些窗口全部關(guān)閉之后，sessionStorage的內(nèi)容將不會存在

存儲大?。?/p>

兩者都為5MB/域名

存儲位置：

兩者都保存在客戶端，不與服務(wù)器進(jìn)行交互

存儲內(nèi)容類型：

兩者都只能存儲字符串，但是可以通過類型轉(zhuǎn)換來存儲各類數(shù)據(jù)

獲取方式：

localStorage: window.localStorage

sessionStorage: sessionStorage

可見localStorage適合在前端存儲長時間使用的數(shù)據(jù)， 而sessionStorage適合存儲短期使用、一次性的數(shù)據(jù)

另外這里要提一句，sessionStorage并不是session：

sessionStorage中的‘session’是指瀏覽器窗口會話，而后者的‘session’指的是服務(wù)器會話

前者是前端存儲，與服務(wù)器無關(guān)，而后者的實現(xiàn)依賴于服務(wù)器

這里只介紹更加常用的localStorage的使用，而sessionStorage的使用其實也類似

localStorage的使用

localStorage作為一個在HTML5中引入的特性，在IE6/7等一些低版本的瀏覽器中是無法被支持的，所以建議在使用localStorage之前先檢查瀏覽器支持情況：

if (!window.localStorage) {
    // 當(dāng)瀏覽器不支持 localStorage ...
} else {
    // 瀏覽器支持 localStorage ...
}

localStorage的使用也很簡單，在localStorage中，數(shù)據(jù)都是以鍵值對的形式存在，可以使用json對象的形式直接對localStorage中的鍵值對進(jìn)行操作：

// 設(shè)置數(shù)據(jù)
localStorage.a = "hello";
localStorage.b = "zero";
// 讀取數(shù)據(jù)
console.log(localStorage.a);
console.log(localStorage.b);

就那么簡單

但是這里要注意一點，存儲在localStorage中的數(shù)據(jù)一定是以字符串形式存在的，所以當(dāng)你存入/讀取其他形式的數(shù)據(jù)時，需要進(jìn)行類型轉(zhuǎn)換才行：

// 存入 json 數(shù)據(jù)
localStorage.jsonTest = JSON.stringify({
    a: "hello",
    b: "zero"
});

// 讀取 json 數(shù)據(jù)
console.log(JSON.parse(localStorage.jsonTest).a);
console.log(JSON.parse(localStorage.jsonTest).b);
使用js庫來操作localStorage

有很多js庫提供了一系列簡化localStorage并且提供跨平臺操作的功能，使用它們可以更加輕易地使用localStorage，這里介紹一個js庫——store.js

store.js 的一大優(yōu)點就是他將為你自動進(jìn)行類型轉(zhuǎn)換，相當(dāng)于你可以直接在 localStorage 中儲存諸如 json 對象等類型的數(shù)據(jù)，這些對你來說是透明的

安裝：

npm install store

API：

// 引入
let store = require("store");

// 設(shè)置數(shù)據(jù)
store.set("user", {
    name: "Kindem"
});

// 獲取數(shù)據(jù)
let obj = store.get("user");

// 刪除數(shù)據(jù)
store.remove("user");

// 刪除所有數(shù)據(jù)
store.clearAll();

// 遍歷鍵值對
store.each((value, key) => {
    // do something ...
});
參考

https://www.cnblogs.com/cencenyue/p/7604651.html

https://www.cnblogs.com/st-leslie/p/5617130.html

http://www.w3school.com.cn/html5/html_5_webstorage.asp

https://www.npmjs.com/package/store

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96000.html

相關(guān)文章

  • 前端存儲

    摘要：前端存儲簡介一種在前端保存數(shù)據(jù)的思想。為了保證前端性能，一般不會保存大量數(shù)據(jù)。在手動刪除前一直存在關(guān)閉當(dāng)前頁面后被清除可存放大小與服務(wù)器通信每次都在頭部信息中。 前端存儲 簡介 一種在前端保存數(shù)據(jù)的思想。第一次在頁面中的保存數(shù)據(jù)，那么從第二次開始就可以使用了?？梢允褂玫姆椒ㄓ校? cookie localeStorage sessionStorage ie的userData web s...

    luckyw 評論0 收藏0

  • 前端存儲

    摘要：前端存儲簡介一種在前端保存數(shù)據(jù)的思想。為了保證前端性能，一般不會保存大量數(shù)據(jù)。在手動刪除前一直存在關(guān)閉當(dāng)前頁面后被清除可存放大小與服務(wù)器通信每次都在頭部信息中。 前端存儲 簡介 一種在前端保存數(shù)據(jù)的思想。第一次在頁面中的保存數(shù)據(jù)，那么從第二次開始就可以使用了?？梢允褂玫姆椒ㄓ校? cookie localeStorage sessionStorage ie的userData web s...

    binaryTree 評論0 收藏0

  • [聊一聊系列]聊一聊前端存儲那些事兒

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

    caige 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<