LocalStorage 用来储存网页里要用来呈现在画面上的数据资讯
可存取时间:刷新或重开页面时都不会消失,除非被手动清除,否则会永远保存
可存取大小:5MB
SessionStorage 较常用在内容特别多的表单上并且需要拆分成多个页面的时候,因为使用者需要依序切换页面来填写表单资讯,就可以将使用者所填写的表单资讯都储存在 SessionStorage 中。
可存取时间:关闭页面或浏览器後就会被清除
可存取大小:5MB
console.log(typeof)
会看到资料自动变成了 String,即使存入的资料是 Number 或 Array....等,都会自动变成 String)localStorage.setItem("name","Helen");
查看存进 Storage 的方式有两种,一种是 console.log
,另一种是 F12,Firefox 可以在 storage 找到,chrome 则可以在 appilication 找到,会看到 key 是 name, value 是 Helen 的资料
let localname = localStorage.getItem("name");
console.log(localname); // Helen
删除某笔资料,使用 key 就可以删除对应的 value 资料
localStorage.removeItem("name");
则localStorage & SessionStorage 的 name 这笔资料就被删除了
删除 Storage 内的所有资料
localStorage.clear();
在前面说过不管存入什麽资料到 Storage 都会自动变成 String,如果我们想要以什麽型态存入资料就以什麽型态取出资料的话,就必须使用 JSON.stringify()
& JSON.parse()
。
下面以阵列做举例,当然 Object,Boolean...等各种资料型态都是适用的。
let friends = ["Josh","John","Mike"];
localStorage.setItem("friends",JSON.stringify(friends));
用 F12 查看时,我们会看到 key 是 friends,value 是 ["Josh","John","Mike"] 的资料在里面。
let data = JSON.parse(localStorage.getItem("friends"));
concole.log(data); // ["Josh","John","Mike"]
JSON.stringify()
把原本的资料变成 StringsetItem(key,value)
储存到 StoragegetItem(key)
从 Storage 取出 StringJSON.parse()
把取出的 String 变成原本的资料型态补充:
Cookie 常用来储存用户的登入状态,并且也可以用来储存其它关於网页上的使用者设定、资讯等等....
可存取时间:可以自行设定时间,如果没有设定的话则就是采用预设(关闭浏览器後失效)
可存取大小仅 4k
参考资料:
https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/232745/
<<: 在 React Native 里实作 NSFW (Not suitable for work,工作场合不宜) 分类器
之前有说到 ASP.NET Core Identity 使用的是基於 Claim 的验证,其实 AS...
动机 因为疫情,这学习开始学校要求大家每天都要在九点前到学校网站上传体温,我觉得非常麻烦。 动点,果...
前言 昨天有讲到怎麽运用 nginx 来做基本的分流、限流,但因为昨天举的例子比较简单,真实世界的应...
(三)第5.3条组织角色、责任与职权,高阶管理者应该指派有关ISMS之角色、分配相关责任与职权,这些...
前端开发者在後端 api 尚在开发阶段,需要模拟 api 回传一些种子资料时,自行架设一个开发用的 ...