localStorage（本地储存）

2024-06-27 20:33:25

在HTML5中，加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式，取出的时候再转换回来。

localStorage主要有以下几种方法:

setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value
例：

localStorage.setItem("name","john"); //设置name为john
localStorage.setItem("name","john1"); //覆盖之前的值，现在name所对应的值是john1

getItem(“key”)：获取名称为key的值，如果key不存在则返回null**

removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除

clear()：清空localStorage中所有信息

key()：键的索引

JSON:

例：标准的json对象{“name”:“john”}
JSON.stringify(); // 将json格式的数据（JavaScript 对象）转换成JSON格式的字符串
例：

var  data = {name:"john"};
data = JSON.stringify(data);
localStorage.setItem("data1",data);

JSON.parse(); //将JSON格式的字符串转换成JSON对象进行处理
例：

var str = localStorage.getItem("data1");
var obj = JSON.parse(str);
console.log(obj);

localStorage（本地储存）相关推荐

利用localStorage本地储存js文件
利用localStorage存储js文件,只有在第一次访问该页面的时候加载js文件,以后在访问的时候加载本地localStorage执行封装lsFile类有url.filename(key前缀).l ...
本地储存 localstorage sessionstorage 的兼容性，API，特点
在开发中发现cookie储存会在http请求头中,大大影响了数据请求交互. 现在h5中提供了新的解决方式(API) 存储方式: 1.本地储存 localstorage & sessionsto ...
js监听地址栏变化_vue中本地储存也可以实时监听
网上看到的这个方法在项目里使用了贼爽啊,分享下顺便说一下 localStorage也实用比如在同一个页面里边不同位置两个变量的呈现都是使用的本地储存且一个变量修改,第二个变量也要实时变化 ...
react本地储存_如何使用React和本地存储构建freeCodeCamp的配方框
react本地储存 by Edward Njoroge 爱德华·尼约格(Edward Njoroge) 如何使用React和本地存储构建freeCodeCamp的配方框 (How to build f ...
HTML5中本地储存概念是什么，什么优点，与cookie有什么区别？
html5中的Web Storage 包括了两种存储方式: sessionStorage 和 localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...
javascript中本地储存、离线缓存、地理定位、网络状态
本地储存: 实际开发中某些内容是不需要放到服务器中,而是放到了浏览器中,需要的时候可以快速的访问,甚至页面刷新也可能不会丢失数据,容量较大:这里介绍两种数据存储方式:sessionStorage约5M ...
vue-ls vue 本地储存示例
Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage 一个vue封装的本地储存的方法. 安装 Npm npm install vue-ls --save Ya ...
react本地储存_如何在React项目中利用本地存储
react本地储存以及为什么要这么做. 本地存储是现代Web浏览器固有的Web API. 它允许网站/应用程序在浏览器中存储数据(简单和有限),从而使数据在以后的浏览器会话中可用. 在开始学习本教程 ...
[Redux/Mobx] redux的数据存储和本地储存有什么区别？
[Redux/Mobx] redux的数据存储和本地储存有什么区别? Redux存储的数据本质上都是JS变量,都是在内存中的,页面刷新就会消失本质存储是像localStorage Cookie In ...
使用Vue 2.0+本地储存，留言板
留言板思路 // 把对象添加到数组的最前面 unshift // 数据与表单进行绑定 v-model <!DOCTYPE html> <html><head>&l ...

最新文章

热门文章