json文字列
- json文字列は次のとおりです：json形式の文字列
「Abc123truelkgsjhgo」通常の文字列
"<h1> hgahgo </ h1>" htmlフォーマット文字列
キーと値のペア形式のキーと値は、
「name」：「yasuo」を含めるために二重引用符で囲む必要があります
jsonの目的：
ネットワーク送信中に使用されます。フロントエンドとバックエンドの相互作用など。
オブジェクトと配列を転送できません。
データは文字列の形式でのみ送信できます。
したがって、オブジェクトと配列を転送する場合は、それらを文字列に変換する必要があります。
json形式は、オブジェクトと配列のデータ構造を満たす文字列です。
jsonの使用方法：
JSON.parse（）
json形式の文字列をjsの配列またはオブジェクトに変換します
json.stringify（）
jsの配列またはオブジェクトをjson文字列に変換します
<script>
//--------------------------------------------------------
var str = [1, 2, 3, 4];
var sss = JSON.stringify(str); //把数组转换成为字符串
console.log(sss);
console.log(typeof sss);
//--------------------------------------------------------
var str = ["亚索", true, 3, 4];
var sss = JSON.stringify(str); //把数组转换成为字符串
console.log(sss);
console.log(typeof sss);
//--------------------------------------------------------
var str = ["亚索", true, 3, 4];
var sss = JSON.stringify(str); //把数组转换成为字符串
var ccc = JSON.parse(sss); //把json字符串格式的字符串转换成为数组
console.log(ccc);
console.log(typeof ccc);
//--------------------------------------------------------
var str = [{
name: "亚索",
eag: 18,
skill: "狂风绝息斩"
}, {
name: "孙悟空",
eag: 1800,
skill: "大招"
}, {
name: "赵云",
eag: 18,
skill: "不记得"
}]
var ssa = JSON.stringify(str); //把数组转为字符串
console.log(ssa);
console.log(typeof ssa);
//--------------------------------------------------------
var str = [{
name: "亚索",
eag: 18,
skill: "狂风绝息斩"
}, {
name: "孙悟空",
eag: 1800,
skill: "大招"
}, {
name: "赵云",
eag: 18,
skill: "不记得"
}]
var ssa = JSON.stringify(str); //把数组转为字符串
var cxcc = JSON.parse(ssa); //把json字符串格式的字符串转换成为对象
console.log(cxcc);
console.log(typeof cxcc);
//--------------------------------------------------------
var str = [
'"name":"yasuo"',
'"eag":"18"',
'"skill":"狂风绝息斩"',
'"name":"yasuo"',
'"eag":"18"',
'"skill":"狂风绝息斩"',
{
"name": "yasuo",
"eag": "18",
"skill": "狂风绝息斩"
}
]
var sss = JSON.stringify(str)
var ccc = JSON.parse(sss);
// console.log(sss);
// console.log(typeof sss);
console.log(ccc);
console.log(typeof ccc);
</script>
localStorageローカルストレージ
- ローカルに保存する利点：
サーバーに負担をかけません
アクセス速度を向上させる
- 制限：
ローカルメモリを使用します
重要な情報は安全ではありません
3つのローカルストレージ方法：
Localstorage h5は、IE8より下の5MBのストレージスペースと互換性がありません
sessionstorage5MBのストレージスペース
クッキー4KB収納スペース
localStorageの利点：
容量がCookieよりも大きい
制限：
互換性の問題があります
クローラーによって取得されません
基本的に、これは文字列の読み取り操作であり、より頻繁に、より多くのコンテンツが保存されるため、ページがフリーズします。
使用する：
1.最初に互換性の問題を検討します
if（！window.localStorage）{
alert（ "このブラウザはローカルストレージをサポートしていません！"）
falseを返します。
}そうしないと{
//ビジネスの論理
}
2.アレイをlocalstorageに保存します
3つの書き方：
storage [“ name”] =“ yasuo”;
storage.setItem（ "name"、 "sss"）
storage.age = 18;
3.読む
storage [“键”];
storage.getItem（“键”）
storage。键;
4.削除
storage.removeItem（ "age"）;
5.変更：
同じキーを使用して異なる値を割り当てることは、変更することです
6.すべてクリア
storage.clear（）;
7.すべてのキー値を取得します
for（var i = 0; i <storage.length; i ++）{
var key = storage.key（i）;
var value = storage.getItem（key）;
}
【注意】localstorageは文字列しか保存できません。オブジェクトや配列を入れると、取り出したときに文字列データになります。
オブジェクトや配列を保存したい場合は、まずオブジェクトや配列をjson文字列に変換してから保存し、必要に応じて取り出してオブジェクトや配列に変換して使用します。
ストレージイベント：永続的に保存
相同性：
異なるドメイン名で保存されたデータは一般的ではありません
例えば：
<script>
//判断浏览器是否支持
if (!window.localStorage) {
alert("该浏览器不支持localStorage");
} else {
//写入执行的业务逻辑
var storage = window.localStorage;
//将数据存储到本地的三种写法:
storage["name"] = "yasuo"; //给storage赋值 第一种
storage.setItem("age", "18");; //第二种
storage.skill = "buzhidaoaa" //第三种
//------------------------------------------------------
storage.setItem("name", "zhaoyun"); //给storage的name值修改
storage.setItem("age", "18");
storage.setItem("skill", "buzhidao");
//------------------------------------------------------
//读取键值的三种方法：
console.log(storage.getItem("name")) //读取storage的name值
console.log(storage.age)
console.log(storage["skill"])
//------------------------------------------------------
//删除
storage.removeItem("name") //name的值在本地就会被删除掉
//------------------------------------------------------
// 修改 用同一个键去赋不同的值就是修改
storage.setItem("name", "zhaoyun");
//------------------------------------------------------
// 清除全部
storage.clear();
//------------------------------------------------------
// 获取所有的键值
for (i = 0; i < storage.length; i++) {
var sss = storage.key(i);
var valer = storage.getItem(sss);
console.log("sss=" + sss + ",valer=" + valer);
}
}
</script>
sessionstorage
ストレージスペース：5M
、使用法は基本的にローカルストレージと同じです
彼らに共通していること：
データをローカルに保存する
文字列のみを保存できます
違い：
手動で削除しない限り、localstorageは永続的に保存されます
sessionstorageセッションキャッシュ
セッションの終了時に期限切れ
1.コード制御の終了
2.ブラウザを閉じた/ウィンドウを閉じた