用localStorage来存储数据的一些经验

localStorage:

是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存

sessionStorage:

用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。

 

localStorage与sessionStorage具有相同的API,以下方法都可以用于sessionStorage

 

localStorage存储方法

localStorage.name ='vanida;

localStorage["name"]='vanida';

localStorage.setItem("name","vanida");

   

//这三种设置值方式是一样的;

 


localStorage获取值方法


var name = localStorage["name"]

var name= localStorage.name

var name= localStorage.getItem("name");

//这三种获取值方式是一样的;

 


localStorage清除特定值方法

//清除name的值
localStorage.removeItem("name");

localStorage.name='';

 

localStorage清除所有值方法

 localStorage.clear()

 

localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();

 

var person = {name:"vanida","sex":"girl","age":25};

localStorage.setItem("person",JSON.stringify(person));

// localStorage.person="{"name":"vanida","sex":"girl","age":25}"

注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy!

 

 

然后取出person的对象你可以用JSON.parse();

 

person = JSON.parse(localStorage.getItem("person"));

// {name: "vanida", sex: "girl", age: 25}

好的,以下是一个使用 Blazor 和浏览器本地存储localStorage)来保数据的简单示例: 1. 首先,在 Blazor 组件中引入 JavaScript 的 localStorage 对象: ``` @inject IJSRuntime JsRuntime @code { private IJSObjectReference _localStorage; protected override async Task OnInitializedAsync() { _localStorage = await JsRuntime.InvokeAsync<IJSObjectReference>("eval", "localStorage"); } } ``` 上述代码中,我们使用 @inject 注入了 IJSRuntime 接口,并在 OnInitializedAsync 方法中调用了 JavaScript 的 eval 函数来获取 localStorage 对象的引用。 2. 接下来,在组件中定义需要保数据: ``` @code { private string _myData = ""; private async Task SaveData() { await _localStorage.InvokeVoidAsync("setItem", "myData", _myData); } private async Task LoadData() { _myData = await _localStorage.InvokeAsync<string>("getItem", "myData"); } } ``` 上述代码中,我们定义了一个字符串类型的变量 _myData,并编写了两个方法 SaveData 和 LoadData 别用于保和加载数据。在 SaveData 方法中,我们使用 _localStorage 对象的 setItem 方法将数据localStorage 中;在 LoadData 方法中,我们使用 _localStorage 对象的 getItem 方法从 localStorage 中加载数据。 3. 最后,在组件中添加保和加载数据的按钮或其他触发事件: ``` <button @onclick="SaveData">保数据</button> <button @onclick="LoadData">加载数据</button> ``` 上述代码中,我们使用 Blazor 的 @onclick 指令将 SaveData 和 LoadData 方法与按钮的点击事件关联起来。 这样,当用户点击保数据按钮时,数据将被保到浏览器的 localStorage 中;当用户点击加载数据按钮时,数据将从 localStorage 中加载并更新到组件中的 _myData 变量中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值