localStorage（本地化存储）

最新推荐文章于 2024-12-06 18:36:45 发布

想吃烧烤

最新推荐文章于 2024-12-06 18:36:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48722471/article/details/121911295

本文详细介绍了HTML5的localStorage和sessionStorage特性，用于解决cookie存储空间不足的问题。localStorage提供5M的存储空间，数据永久保存；sessionStorage数据仅在会话期间有效。两者都只能存储字符串，建议存储前转换为JSON。文中展示了如何进行数据的增删查改操作，并强调了使用JSON.stringify()和JSON.parse()进行数据转换的重要性。此外，还提到了使用注意事项，如避免存储过于复杂的数据结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web localStorage

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

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

localStorage的使用

1.length 本地存储数据的数量

console.log(localStorage.length);

2.key() 通过索引找到存储的数据

storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }

3.localstorage的写入

localStorage.setItem('name', 'kaivon');
console.log(typeof storage["name"]);//String

4.localStorage的读取

var c=storage.getItem("name");
console.log(name);

5.localStorage的删

1.将localStorage的所有内容清除

storage.clear();
            console.log(storage);

2.将localStorage中的某个键值对删除

localStorage.removeItem('color');

注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

var color = ["red", "green"];   //"red", "green"
        var color = { "c1": "red", "c2": "green" }  //[object Object]
        localStorage.setItem('color', JSON.stringify(color));//{ "c1": "red", "c2": "green" }
        console.log(JSON.parse(localStorage.getItem('color')));//{c1: 'red', c2: 'green'}