localstorage的用法（【js】前端持久化存储 localStorage、sessionStorage、Cookie、indexedDB的区别及用法）
本文目录
- 【js】前端持久化存储 localStorage、sessionStorage、Cookie、indexedDB的区别及用法
- localstorage
- localstorage，sessionstorage的区别和用法
- cookie，localStorage，sessionStorage
【js】前端持久化存储 localStorage、sessionStorage、Cookie、indexedDB的区别及用法
1.localStorage
2.sessionStorage
api
保存数据到本地
从本地存储获取数据
本地存储中删除某个保存的数据
删除所有保存的数据
作用域不同
indexedDB的特性
localstorage
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站 性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
/************************源自w3c****************************/
二、用法小结
（一）设置值
1. localStorage.setItem(key,value):如果key的value存在时，更新key的值,例：localStorage.setItem("name","moomoo");//【推荐写法】
2. localStorage.name = "moomoo";
3. localStorage = "moomoo";
（二）获取值
1. localStorage.getItem(key,value):如果key的value不存在时，返回null，例：localStorage.getItem("name");//【推荐写法】
2. var name = localStorage.name;
3. var name = localStorage;
（三）清除值
1. localStorage.remove(key)，//表示清除单项key的值，
例:localStorage.remove("name");//执行这句话就会清除name的值
2. localStorage.clear(),//表示清除localStorage存储的所有数据
（四）遍历存储的数据
//当你不清楚本地localStorage存储了多少数据的时候，
用key(index)方法绝对是一个不错的选择，
key(index)方法可以遍历localStorage存储的key。写个简单的例子：
for(i=0;i《localStorage.length;i++){
document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"
");
}
localStorage.length表示本地存储数据的总量；
localStorage.key(i),表示获取第i个数据的key；
localStorage.getItem(localStorage.key(i))，表示获取第i个数据的value。
（五）JSON存储
当需要存储的数据很多时，可以将数据存储到数组中并转换成JSON格式的数据。
1. JSON.stringify(data) 将对象转换成JSON格式的数据串。
2. JSON.parse(data)将数据解析成对象并返回解析后的对象。
这样说或许不太好懂，直接上例子：
var arr = {"name":"moomoo","age":2,"eat":"apple"};
localStorage.setItem("arr",JSON.stringify(arr));
arr = JSON.parse(localStorage.getItem("arr"));
localstorage，sessionstorage的区别和用法
localStorage和sessionStorage区别
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
同源的判断规则：
localStorage和sessionStorage使用时使用相同的API：
cookie，localStorage，sessionStorage
一、cookie
cookie是浏览器缓存，可以与session配合使用，用于网站的身份识别。
特点：1、必须在服务器环境下使用。
2、在没有设置到期时间的时，当用户结束浏览器会话时，就消失（默认过期时间是一次会话）。
3、必须要一条一条的存。
4、相同名字的会被后存的覆盖掉。
5、根目录访问不了子目录下的cookie，但子目录可以访问它所有上级目录的cookie。
6、容量小，大概4k左右。
7、不安全。
8、每此都会向服务器发请求。
9、里面存的都是字符串。
10、查询不到返回空。
***隐藏网址***
用法：document.cookie=’name=value;expires=xxx’
一般封装一个设置cookie的函数，来调用。一般整个项目网站，只有一套cookie，共享一套cookie，存在根目录下，这样所有文件都可以访问。
设置cookie的三个参数分别是名字，值，存储时间（我这里以天计）。
获取cookie通过名字就可以获取。
删除cookie只要设置cookie时把日期设为一个负值就可以删除cookie。
二、localStorage
特点：
1、容量5M。
2、不会往服务器发数据。
3、不会有过期时间。
4、没有路径限制。
5、查询不到返回 undefine。
三、sessionStorage
特点：
1、存取方便。
2、只存在当前会话期间，存储在sessionStorage里面的数据在页面会话结束时会被清除。
更多文章：
2026年10月23日 05:30
2026年10月23日 04:30
jquery动态添加表格行（如何通过jquery动态给表格添加一行）
2026年10月23日 00:30
cmake命令行参数（CMake （三）cmake 在工程中的用法）
2026年10月23日 00:00
2026年10月22日 23:50
linux数据备份命令（Linux系统下常用的数据备份方法有哪些）
2026年10月22日 23:20
2026年10月22日 23:10
executequery返回值（ExecuteQuery（sql）的返回值）
2026年10月22日 23:00
2026年10月22日 22:50
舍曲林吃了一周越来越严重（我母亲77岁，服用舍曲林一周，开始半片，4天后改为1片，第三天开始失眠，第四天出现乏力、食欲下降，）
2026年10月22日 21:00
