react使用localstorage存储注册的多个/单个用户信息/登录验证

localStorage 通常用来存储服务器发送的一些数据或者用户自定义数据。localStorage 中的键值对总是以字符串的形式存储。 (意味着数值类型会自动转化为字符串类型)。

与 cookie 相比，localStorage 的存储量较大（cookie只有2k，只能存放字符串）

存储在 localStorage 的数据可以长期保留；

而当页面会话结束（当页面被关闭时），存储在 sessionStorage 的数据会被清除 。

单个数据存储：

 多个数据存储：

注册页面：

import React from 'react';
import "../reg/reg.css"
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
class reg extends React.Component{
    regclick = () => {
        const username = this.user.value
        const password = this.password.value
        let user = localStorage.getItem("user")
        console.log(window.localStorage.user)
        if(window.localStorage.user) {//存在用户
            var array = JSON.parse(window.localStorage.user);
            console.log(array)
        }else {
            array = []//如果一个用户也没有那么需要创建一个新的数组放信息
        }
        if (array.some(item => item.username === username)) {
            alert("存在用户")
        }else {
            let obj = {username:username,password:password}
            array.push(obj);
            //localStorage.setItem("","")设置的是一个值 永远只有一个值
            //下面这个可以push多个对象
            window.localStorage.user=JSON.stringify(array);
            alert("用户创建成功");
        }
   } 
    render(){
        return (
            <main className='box'>
                <main className='top'>
                        <Link to="/log">
                            <img src={require("../img/05.png")} className='back' alt=""/>
                        </Link>
                        <main className='regs' >注册</main>
                    </main>
                    <main className='user'>
                        <input type="text" placeholder='输入用户名' ref={el=>this.user=el} />
                        <input type="password" placeholder='输入密码' ref={el=>this.password=el} />
                        <button onClick={this.regclick}>注册</button>
                    </main>
                    <main className='read'>
                        <main className='reading'>
                            <input type="checkbox"  /> <p className='agree'>已阅读并同意</p>
                        </main>
                        <main className='reading'>
                           <p className='a'>微博服务使用协议</p>及<p className='a'>微博个人信息保护政策</p>
                        </main>
                        
                    </main>
                   
                </main>
        )
    }
}
export default reg;

登录验证：