localStorage 本地存储的相关知识点总结（页面登录注册功能的简单实现）

向右看齐 2022-01-10 05:55 637阅读 0赞

## 1、什么是localStorage ##

用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

## 2、localStorage 优势与局限 ##

**优势：**  
a、localStorage拓展了cookie的4K限制  
b、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约**带宽**，但是这个却是只有在**高版本**的浏览器中才支持的

**局限:**  
a、浏览器的大小不统一，IE8以上的IE版本才支持localStorage这个属性  
b、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换  
c、localStorage在浏览器的隐私模式下面是不可读取的  
d、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

## 3、localStorage 本地存储 操作 ：增 删 改 查 ##

**增 ：**  
有三种方案

var ls = window.localStorage;
    ls.aa = 1;
    ls["bb"] = 2;
    ls.setItem("cc",3);

length 属性可以获取键的个数

**查：**

console.log( ls.aa , ls["bb"] , ls.getItem("cc") );  //取出对象中键对应的值

**改 ：**  
三种方案

ls.setItem("aa",33);
    ls.aa = 22;
    ls["aa"]=77;

**删 ：**  
一、将localStorage的所有内容清除使用clear() 方法

var storage=window.localStorage;
    storage.a=1;
    storage.setItem("c",3);
    console.log(storage);
    storage.clear();
    console.log(storage);

二、将localStorage中的某个键值对删除

var storage=window.localStorage;
    storage.a=1;
    storage.setItem("c",3);
    console.log(storage);
    storage.removeItem("a");//无论以哪种方式存储都可以使用该方法删除
    console.log(storage.a);

## 4、localStorage中如何存储对象两个方法 ##

对象和字符串的转换：  
JSON.parse() //字符串对象转对象 （若现把字符串取出来放在数组中，需要将字符串转为对象）  
JSON.stringify() //对象转字符串对象 （存储的类型只能是字符串，所以存储的时候需要将对象转字符串对象）

## 5、总结 ： ##

localStorage 的基本方法：  
定义：localStorage.setItem(‘key’,‘value’)  
获取：localStorage.getItem(‘key’)  
删除：localStorage.removeItem(‘key’)  
清空：localStorage.clear()  
storage中有一个length属性可以获取storage中键的个数

//实例  
![localStorage基本方法详解][localStorage]  
//运用本地存储实现登录注册功能  
![运用本地存储实现登录注册功能][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
![运用本地存储实现登录注册功能][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]

[localStorage]: /images/20220109/db9aa3fee30b4a05add63b1886732c34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220109/5af614f1a0ee4b468ab15f206705b27a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220109/63cea03f93c641a291661dff24e4816d.png