网站硬件建设,公司怎样建设阿里巴巴网站,pycharm 网站开发,wordpress首页仅导航怎么设置一、背景#xff1a;
localStorage作为HTML5 Web Storage的API之一#xff0c;使用标准的键值对#xff08;Key-Value,简称KV#xff09;数据类型主要作用是本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中#xff0c;直到用户或者脚本主动清除数据
localStorage作为HTML5 Web Storage的API之一使用标准的键值对Key-Value,简称KV数据类型主要作用是本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中直到用户或者脚本主动清除数据否则该数据会一直存在。也就是说使用了本地存储的数据将被持久化。
localStorage理论上来说是永久有效的即不主动清空的话就不会消失即使保存的数据超出了浏览器所规定的大小也不会把旧数据清空而只会报错。但需要注意的是在移动设备上的浏览器或各Native App用到的WebView里localStorage都是不可靠的可能会因为各种原因比如说退出App、网络切换、内存不足等原因被清空
localStorage的优势在于拓展了cookie的4KB限制并且可以将第一次请求的数据直接存储到本地这相当于一个5MB大小针对于前端页面的数据库。相比于cookielocalStorage可以节约带宽但是这项功能需要高版本的浏览器来支持。 二、主要方法
length返回 localStorage 中的键值对的数目setItem()增加一个键值对到 localStorage 中getItem()从 localStorage 中查询指定 key 的值removeItem()从 localStorage 中删除指定的键值对clear()清空 localStorage 中所有键值对key() 传入一个数字 n用于返回指定第 n 个键的名字。
localStorage.setItem(message, 123)
let data localStorage.getItem(message)
console.log(data); 三、过程localStorage引发的问题 获取数据之后只是放到了localStorage中没有给页面赋值。此外关于缓存设置有关的逻辑判断的问题应该交由后端处理前端尽可能做到职责单一化。
四、总结
项目开发过程中使用一项技术必须要明确其特征使用场景再进行运用。localStorage和sessionStorage的相似在使用中容易造成混淆主要区别是
生命周期localStorage:localStorage的生命周期是永久的关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据否则数据永远不会消失。
存储内容类型localStorage和sessionStorage只能存储字符串类型对于复杂的对象可以使用ECEC提供的JSON对象的stringify和parse来处理。
获取方式localStoragewindow.localStorage;sessionStoragewindow.sessionStorage;。
