Day 10 - Web Storage API

LocalStorage 用来储存网页里要用来呈现在画面上的数据资讯

可存取时间:刷新或重开页面时都不会消失,除非被手动清除,否则会永远保存
可存取大小:5MB

SessionStorage 较常用在内容特别多的表单上并且需要拆分成多个页面的时候,因为使用者需要依序切换页面来填写表单资讯,就可以将使用者所填写的表单资讯都储存在 SessionStorage 中。

可存取时间:关闭页面或浏览器後就会被清除
可存取大小:5MB

  • LocalStorage 和 SessionStorage 储存资料的方式皆为 key value pair,且key 和 value 都必须是 String。(如果存进去的 value 不是 String,console.log(typeof) 会看到资料自动变成了 String,即使存入的资料是 Number 或 Array....等,都会自动变成 String)
  • 使用 key 就可以找到 value,且每一笔资料的key 是独一无二的,不能重复!
  • 两者使用方法相同,以下统一使用 localStorage 举例

setItem(key,value) 储存资料

localStorage.setItem("name","Helen");

查看存进 Storage 的方式有两种,一种是 console.log,另一种是 F12,Firefox 可以在 storage 找到,chrome 则可以在 appilication 找到,会看到 key 是 name, value 是 Helen 的资料

getItem(key) 取得资料

let localname = localStorage.getItem("name");
console.log(localname); // Helen

removeItem(key) 删除资料

删除某笔资料,使用 key 就可以删除对应的 value 资料

localStorage.removeItem("name");

则localStorage & SessionStorage 的 name 这笔资料就被删除了

clear() 删除全部资料

删除 Storage 内的所有资料

localStorage.clear();

在前面说过不管存入什麽资料到 Storage 都会自动变成 String,如果我们想要以什麽型态存入资料就以什麽型态取出资料的话,就必须使用 JSON.stringify() & JSON.parse()
下面以阵列做举例,当然 Object,Boolean...等各种资料型态都是适用的。

JSON.stringify()

let friends = ["Josh","John","Mike"];
localStorage.setItem("friends",JSON.stringify(friends));

用 F12 查看时,我们会看到 key 是 friends,value 是 ["Josh","John","Mike"] 的资料在里面。

JSON.parse()

let data = JSON.parse(localStorage.getItem("friends"));
concole.log(data); // ["Josh","John","Mike"]
  • 总结:资料存入 Storage 到取出 4 步骤:
  1. JSON.stringify() 把原本的资料变成 String
  2. setItem(key,value) 储存到 Storage
  3. getItem(key) 从 Storage 取出 String
  4. JSON.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,工作场合不宜) 分类器

>>:  风险评监三步曲

Day28 Policy-based authorization

之前有说到 ASP.NET Core Identity 使用的是基於 Claim 的验证,其实 AS...

学校体温自动上传爬虫(学习记录)

动机 因为疫情,这学习开始学校要求大家每天都要在九点前到学校网站上传体温,我觉得非常麻烦。 动点,果...

Day08-流量限制(三)

前言 昨天有讲到怎麽运用 nginx 来做基本的分流、限流,但因为昨天举的例子比较简单,真实世界的应...

ISO 27001 资讯安全管理系统 【解析】(十五)

(三)第5.3条组织角色、责任与职权,高阶管理者应该指派有关ISMS之角色、分配相关责任与职权,这些...

Day 24 快速启动个 JSON Server

前端开发者在後端 api 尚在开发阶段,需要模拟 api 回传一些种子资料时,自行架设一个开发用的 ...