浏览器本地存储-localStorage的介绍和使用

2024-06-08 20:24:27

一、localStorage是什么？

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作本地存储来的，解决了cookie占用带宽和存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage的大小，一般浏览器支持的是5M，但在不同的浏览器中会有所不同。

二、localStorage的优点和缺点

优点
1、localStorage突破了cookie的4K限制。
2、localStorage可以将请求的数据直接存储到本地，这个相当于一个5M大小的前端页面数据库，相比于cookie可以节约带宽。

缺点
1、在不同浏览器中的大小不一样，并且IE浏览器在IE8以上的才支持。
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，要使用JSON对象类型则需要一些转换。
3、localStorage在浏览器的隐私模式下面是不可读取的。
4、localStorage不能被爬虫抓取到。

相关：localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话，会话结束的时候，sessionStorage中的键值对会被清空。

三、各浏览器对localStorage的支持情况

四、localStorage的使用

因为localStorage是HTML5新增的，老版本的浏览器是没有支持的，所以使用localStorage的第一步是检测当前浏览器是否支持。

if(!window.localStorage){alert("您的浏览器不支持localStorage!");
}else{//可以正常使用localStorage
}

localStorage是以键值形式存储数据的，它的值目前是固定为String字符串，而键值的使用有三种形式，写入、读取通用。
1、localStorage[“a”]
2、localStorage.a
3、localStorage.setItem(“a”,value)
所以，我们可以这样使用：

if(!window.localStorage){alert("您的浏览器不支持localStorage!");
}else{//可以正常使用localStoragevar localStorage = window.localStorage;//写入数据localStorage["a"] = "1";localStorage.b = "2";localStorage.setItem("c","3");//读取数据alert("a="+localStorage.getItem("a"));alert("b="+localStorage["b"]);alert("c="+localStorage.c);
}

浏览器本地存储-localStorage的介绍和使用相关推荐

浏览器本地存储localstorage
本地存储一般体现在搜索记录中,用于方便用户下次搜索在浏览器的控制台中的Application中查看数据的增删 ,首先先准备四个按钮来控制 <button type="button&q ...
浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录浏览器本地存储浏览器本地存储浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
IndexedDB浏览器本地存储、缓存、数据库、介绍
目录 1.前言 2.IndexedDB简介 3.IndexedDB使用场景 4.IndexedDB特点 4.1.非关系型数据库 NoSql 4.2.持久化存储 4.3.异步操作 4.4.支持事务 4. ...
Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue 浏览器本地存储
文章目录 localstorage SessionStorage 总结 TodoList 改为本地存储 localstorage <!DOCTYPE html> <html lang ...
Vuex是什么？以及和本地存储localstorage的区别
先来说一下Vuex是什么? 官方给出的解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
快来看啊 --- --- --- ＞＞＞＞浏览器本地存储 ~~~
1. 浏览器本地存储方式及使用场景 (1)Cookie Cookie是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,Cookie就出现了. ...
【前端浏览器】浏览器缓存（http缓存）浏览器本地存储（总结）
浏览器缓存 && 浏览器本地存储(总结) 文章目录浏览器缓存 && 浏览器本地存储(总结) 写在前面一.浏览器缓存(http缓存) 相关术语 1. 对浏览器的缓存机 ...

最新文章

热门文章